(feature) Update UI & Resource Availability

src/nav/MCLMenu.jsx

@@ -0,0 +1,85 @@
+// React imports
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+// Internal Imports
+import pages from "./MCLPages.jsx";
+
+// Materialui
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+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 ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+
+const drawerWidth = 250;
+export default function MCLMenu() {
+  const location = useLocation();
+  const [drawerOpen, setDrawer] = useState(false);
+
+  const toggleDrawer = () => setDrawer(!drawerOpen);
+  const closeDrawer = () => setDrawer(false);
+
+  const navHeader = () => {
+    const name = location.pathname.split("/").pop();
+    const pathStr = name.charAt(0).toUpperCase() + name.slice(1);
+    return pathStr;
+  };
+
+  const drawerIndex = (isDrawer) => (theme) =>
+    theme.zIndex.modal + 2 - (isDrawer ? 1 : 0);
+
+  return (
+    <AppBar position="fixed" sx={{ bgcolor: "black", zIndex: drawerIndex() }}>
+      <Box sx={{ flexGrow: 1, margin: "0 20px" }}>
+        <Toolbar disableGutters>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+            onClick={toggleDrawer}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Drawer
+            open={drawerOpen}
+            onClose={closeDrawer}
+            sx={{ zIndex: drawerIndex(true) }}
+          >
+            <Toolbar />
+            <Box
+              sx={{ width: drawerWidth, overflow: "auto" }}
+              role="presentation"
+            >
+              <List>
+                {pages.map((page, index) => (
+                  <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()}
+          </Typography>
+        </Toolbar>
+      </Box>
+    </AppBar>
+  );
+}