feat : mui & state refacto

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>
+  );
+}