minecluster/src/nav/MCLMenu.jsx

// 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 HomeIcon from "@mui/icons-material/Home";
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"
      color="primary"
      sx={{ zIndex: drawerIndex(), bgcolor: "black" }}
      enableColorOnDark={true}
    >
      <Box
        sx={{ flexGrow: 1, margin: "0 20px", color: "white" }}
        className="appbar-items"
      >
        <Toolbar disableGutters>
          <IconButton component={Link} to="/" color="inherit">
            <HomeIcon />
          </IconButton>
          <span style={{ margin: "auto 0", color: "inherit" }}>
            {navHeader()}
          </span>
        </Toolbar>
      </Box>
    </AppBar>
  );
}