minecluster/src/nav/MCLMenu.tsx

// @ts-nocheck
// React imports
import { useState } from "react";
import { Link, useLocation } from "react-router-dom";

// Internal Imports
import pages from "./MCLPages.tsx";

// 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={{ zIndex: drawerIndex() }}>
      <Box sx={{ flexGrow: 1, margin: "0 20px" }} className="appbar-items">
        <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) }}
            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()}
          </Typography>
        </Toolbar>
      </Box>
    </AppBar>
  );
}