= ({ open, onClick }) => {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+ {mainListItems}
+
+ {secondaryListItems}
+
+ );
+};
+
+export default Menu;
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
new file mode 100644
index 0000000..a2620aa
--- /dev/null
+++ b/src/components/Menu/index.ts
@@ -0,0 +1 @@
+export { default as Menu } from "./Menu";
diff --git a/src/components/Menu/listItems.tsx b/src/components/Menu/listItems.tsx
new file mode 100644
index 0000000..437cd36
--- /dev/null
+++ b/src/components/Menu/listItems.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import ShowChartIcon from "@material-ui/icons/ShowChart";
+import ExitToAppIcon from "@material-ui/icons/ExitToApp";
+import SportsEsportsIcon from "@material-ui/icons/SportsEsports";
+import ForumIcon from "@material-ui/icons/Forum";
+
+export const mainListItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const secondaryListItems = (
+
+
+
+
+
+
+
+
+);
diff --git a/src/components/ThemeToggler/ThemeToggler.test.tsx b/src/components/ThemeToggler/ThemeToggler.test.tsx
new file mode 100644
index 0000000..c7e1740
--- /dev/null
+++ b/src/components/ThemeToggler/ThemeToggler.test.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import ThemeToggler from "./ThemeToggler";
+
+it("renders without crashing", () => {
+ const div = document.createElement("div");
+ ReactDOM.render(, div);
+ ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/components/ThemeToggler/ThemeToggler.tsx b/src/components/ThemeToggler/ThemeToggler.tsx
new file mode 100644
index 0000000..bd06d35
--- /dev/null
+++ b/src/components/ThemeToggler/ThemeToggler.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from "react";
+import WbSunnyOutlinedIcon from "@material-ui/icons/WbSunnyOutlined";
+import Brightness2Icon from "@material-ui/icons/Brightness2";
+import Switch from "@material-ui/core/Switch";
+
+const ThemeToggler = () => {
+ return (
+ <>
+
+
+
+
+ );
+};
+
+export default ThemeToggler;
diff --git a/src/components/ThemeToggler/index.ts b/src/components/ThemeToggler/index.ts
new file mode 100644
index 0000000..55aa7d8
--- /dev/null
+++ b/src/components/ThemeToggler/index.ts
@@ -0,0 +1 @@
+export { default as ThemeToggler } from "./ThemeToggler";
diff --git a/src/config/constants.ts b/src/config/constants.ts
new file mode 100644
index 0000000..1f957d3
--- /dev/null
+++ b/src/config/constants.ts
@@ -0,0 +1,2 @@
+export const DRAWER_WIDTH = 240;
+export const NO_CONTENT = "No content";
diff --git a/src/layouts/Default/Default.tsx b/src/layouts/Default/Default.tsx
new file mode 100644
index 0000000..89c0e6d
--- /dev/null
+++ b/src/layouts/Default/Default.tsx
@@ -0,0 +1,53 @@
+import React, { FC, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import Box from "@material-ui/core/Box";
+import { Header } from "../../components/Header";
+import { Menu } from "../../components/Menu";
+import { Footer } from "../../components/Footer";
+import { NO_CONTENT } from "../../config/constants";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: "flex",
+ },
+ appBarSpacer: theme.mixins.toolbar,
+ content: {
+ flexGrow: 1,
+ height: "100vh",
+ overflow: "auto",
+ },
+ container: {
+ paddingTop: theme.spacing(4),
+ paddingBottom: theme.spacing(4),
+ },
+}));
+
+const DefaultLayout: FC = ({ children }) => {
+ const classes = useStyles();
+
+ const [open, setOpen] = useState(true);
+
+ const toggleDrawerOpen = () => {
+ setOpen(!open);
+ };
+
+ return (
+
+
+
+
+
+
+
+ {children || NO_CONTENT}
+
+
+
+
+
+
+
+
+ Имя
+ Счет
+ Монеты
+ Время
+
+
+
+ {data.map((entity) => (
+
+ {entity.name}
+ {entity.score}
+ {entity.coins}
+ {entity.time}
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/pages/Leaderboard/index.ts b/src/pages/Leaderboard/index.ts
new file mode 100644
index 0000000..1482ea0
--- /dev/null
+++ b/src/pages/Leaderboard/index.ts
@@ -0,0 +1 @@
+export { default as Leaderboard } from "./Leaderboard";
diff --git a/src/pages/Leaderboard/mockData.ts b/src/pages/Leaderboard/mockData.ts
new file mode 100644
index 0000000..c10e79a
--- /dev/null
+++ b/src/pages/Leaderboard/mockData.ts
@@ -0,0 +1,42 @@
+type Props = {
+ id: number;
+ name: string;
+ score: number;
+ coins: number;
+ time: number;
+};
+
+function createData({ id, score, name, coins, time }: Props) {
+ return { id, score, name, coins, time };
+}
+
+export const data = [
+ createData({
+ id: 0,
+ score: 1100,
+ name: "Elvis Presley",
+ coins: 70,
+ time: 1533,
+ }),
+ createData({
+ id: 1,
+ score: 1000,
+ name: "Curt Cobain",
+ coins: 67,
+ time: 1452,
+ }),
+ createData({
+ id: 2,
+ score: 990,
+ name: "Michael Jackson",
+ coins: 65,
+ time: 976,
+ }),
+ createData({
+ id: 3,
+ score: 570,
+ name: "ABBA",
+ coins: 35,
+ time: 708,
+ }),
+];
diff --git a/src/pages/index.ts b/src/pages/index.ts
index f675d09..bd97909 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1,2 +1,3 @@
export { Login } from "./Login";
export { Registration } from "./Registration";
+export { Leaderboard } from "./Leaderboard";
\ No newline at end of file