85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
// 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>
|
|
);
|
|
}
|