[FEATURE] Migrated to new loading sequence (#6)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/6

src/nav/MCLMenu.jsx

@@ -13,7 +13,7 @@ import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import MenuIcon from "@mui/icons-material/Menu";
 import Drawer from "@mui/material/Drawer";
-import HomeIcon from "@mui/icons-material/Home";
+import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
@@ -36,18 +36,52 @@ export default function MCLMenu() {
     theme.zIndex.modal + 2 - (isDrawer ? 1 : 0);
 
   return (
-    <AppBar position="fixed" color="primary" sx={{ zIndex: drawerIndex() }}>
-      <Box
-        sx={{ flexGrow: 1, margin: "0 20px", color: "white" }}
-        className="appbar-items"
-      >
+    <AppBar position="fixed" sx={{ zIndex: drawerIndex() }}>
+      <Box sx={{ flexGrow: 1, margin: "0 20px" }} className="appbar-items">
         <Toolbar disableGutters>
-          <IconButton component={Link} to="/" color="inherit">
-            <HomeIcon />
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+            onClick={toggleDrawer}
+          >
+            <MenuIcon />
           </IconButton>
-          <span style={{ margin: "auto 0", color: "inherit" }}>
+          <Drawer
+            open={drawerOpen}
+            onClose={closeDrawer}
+            sx={{ zIndex: drawerIndex(true) }}
+            className="mcl-menu-drawer"
+          >
+            <Toolbar />
+            <Box
+              sx={{ width: drawerWidth, overflow: "auto" }}
+              role="presentation"
+            >
+              <List>
+                {pages.map(
+                  (page, index) =>
+                    page.visible && (
+                      <ListItemButton
+                        key={index}
+                        component={Link}
+                        to={page.path}
+                        selected={location.pathname === page.path}
+                        onClick={closeDrawer}
+                      >
+                        <ListItemIcon>{page.icon}</ListItemIcon>
+                        <ListItemText primary={page.name} />
+                      </ListItemButton>
+                    ),
+                )}
+              </List>
+            </Box>
+          </Drawer>
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
             {navHeader()}
-          </span>
+          </Typography>
         </Toolbar>
       </Box>
     </AppBar>