feat : mui & state refacto

src/sections/layout/NavBar.tsx

@@ -0,0 +1,67 @@
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import { useEffect, useState } from "react";
+import NavMenu from "./NavMenu";
+import { Icon } from "@iconify/react";
+import { useRouter } from "next/router";
+import NavLink from "@/components/NavLink";
+
+interface Props {
+  darkMode: boolean;
+  switchDarkMode: () => void;
+}
+
+export default function NavBar({ darkMode, switchDarkMode }: Props) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    setDrawerOpen(false);
+  }, [router.pathname]);
+
+  return (
+    <Box sx={{ flexGrow: 1, display: "flex" }}>
+      <AppBar
+        position="static"
+        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+      >
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+            onClick={() => setDrawerOpen((val) => !val)}
+          >
+            <Icon icon="mdi:menu" />
+          </IconButton>
+          <NavLink href="/">
+            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+              Free Chess
+            </Typography>
+          </NavLink>
+          <IconButton
+            color="inherit"
+            onClick={() =>
+              window.open("https://github.com/GuillaumeSD/freechess")
+            }
+          >
+            <Icon icon="mdi:github" />
+          </IconButton>
+          <IconButton sx={{ ml: 1 }} onClick={switchDarkMode} color="inherit">
+            {darkMode ? (
+              <Icon icon="mdi:brightness-7" />
+            ) : (
+              <Icon icon="mdi:brightness-4" />
+            )}
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <NavMenu open={drawerOpen} onClose={() => setDrawerOpen(false)} />
+    </Box>
+  );
+}

src/sections/layout/NavMenu.tsx

@@ -0,0 +1,45 @@
+import NavLink from "@/components/NavLink";
+import { Icon } from "@iconify/react";
+import {
+  Box,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+} from "@mui/material";
+
+const MenuOptions = [
+  { text: "Game Report", icon: "streamline:magnifying-glass-solid", href: "/" },
+];
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function NavMenu({ open, onClose }: Props) {
+  return (
+    <Drawer anchor="left" open={open} onClose={onClose}>
+      <Toolbar />
+      <Box sx={{ width: 250 }}>
+        <List>
+          {MenuOptions.map(({ text, icon, href }) => (
+            <ListItem key={text} disablePadding>
+              <NavLink href={href}>
+                <ListItemButton onClick={onClose}>
+                  <ListItemIcon style={{ paddingLeft: "0.5em" }}>
+                    <Icon icon={icon} height="1.5em" />
+                  </ListItemIcon>
+                  <ListItemText primary={text} />
+                </ListItemButton>
+              </NavLink>
+            </ListItem>
+          ))}
+        </List>
+      </Box>
+    </Drawer>
+  );
+}

src/sections/layout/index.tsx

@@ -0,0 +1,36 @@
+import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+import { PropsWithChildren, useMemo } from "react";
+import NavBar from "./NavBar";
+import { red } from "@mui/material/colors";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+
+export default function Layout({ children }: PropsWithChildren) {
+  const [useDarkMode, setDarkMode] = useLocalStorage("useDarkMode", true);
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: useDarkMode ? "dark" : "light",
+          error: {
+            main: red[400],
+          },
+          secondary: {
+            main: useDarkMode ? "#424242" : "#90caf9",
+          },
+        },
+      }),
+    [useDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <NavBar
+        darkMode={useDarkMode}
+        switchDarkMode={() => setDarkMode((val) => !val)}
+      />
+      <main style={{ margin: "2em 2vw" }}>{children}</main>
+    </ThemeProvider>
+  );
+}