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

src/nav/MCLPages.jsx

@@ -0,0 +1,20 @@
+import Home from "@mcl/pages/Home.jsx";
+import Create from "@mcl/pages/Create.jsx";
+// Go To https://mui.com/material-ui/material-icons/ for more!
+import HomeIcon from "@mui/icons-material/Home";
+import AddIcon from "@mui/icons-material/Add";
+
+export default [
+  {
+    name: "Home",
+    path: "/mcl/home",
+    icon: <HomeIcon />,
+    component: <Home />,
+  },
+  {
+    name: "Create",
+    path: "/mcl/create",
+    icon: <AddIcon />,
+    component: <Create />,
+  },
+];

src/nav/MCLPortal.jsx

@@ -0,0 +1,18 @@
+// Import React
+import { Routes, Route, Navigate } from "react-router-dom";
+import pages from "./MCLPages.jsx";
+
+const defaultPage = pages[0].path;
+
+export default function MCLPortal() {
+  return (
+    <Routes>
+      <Route exact path="/mcl/" element={<Navigate to={defaultPage} />} />
+      <Route exact path="/" element={<Navigate to={defaultPage} />} />
+      {pages.map((p, i) => (
+        <Route key={i} path={p.path} element={p.component} />
+      ))}
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

src/nav/Viewport.jsx

@@ -0,0 +1,16 @@
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import MCLPortal from "./MCLPortal.jsx";
+// Import Navbar
+/*import Navbar from "./Navbar.jsx";*/
+import MCLMenu from "./MCLMenu.jsx";
+
+export default function Views() {
+  return (
+    <div className="view">
+      <MCLMenu />
+      <Toolbar />
+      <MCLPortal />
+    </div>
+  );
+}