ota-admin-portal/src/components/Layouts/MenuDrawer.jsx

import React from "react";
import clsx from "clsx";
import {
  Container,
  Drawer,
  AppBar,
  Toolbar,
  Typography,
  Divider,
} from "@material-ui/core";

import SideMenu from "./SideMenu";
import useStyles from "../useStyles";
import { useUserContext } from "../Contexts/UserContext";
import { useStatusContext } from "../Contexts/StatusContext";
import UserMenu from "./UserMenu";
import SiteBreadcrumbs from "../Controls/SiteBreadCrumbs";
import logo from "../../assets/fisker-badge.svg";

export default function MenuDrawer({ children }) {
  const classes = useStyles();
  const { title, sitePath } = useStatusContext();
  const { token } = useUserContext();

  return (
    <div className={classes.root}>
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: token !== null,
        })}
      >
        <Toolbar>
          <div>
            <Typography variant="h6" noWrap>
              {title}
            </Typography>
            <SiteBreadcrumbs path={sitePath} className={classes.breadcrumbs} />
          </div>
          {token !== null && (
            <UserMenu color="inherit" className={classes.rightToolbar} />
          )}
        </Toolbar>
      </AppBar>
      {token !== null && (
        <Drawer
          className={classes.drawer}
          variant="persistent"
          anchor="left"
          open={true}
          classes={{
            paper: classes.drawerPaper,
          }}
        >
          <div className={clsx(classes.drawerHeader, classes.drawerHeaderLogo)}>
            <img
              src={logo}
              alt="Fisker Admin Portal"
              className={classes.logo}
            />
          </div>
          <Divider />
          <SideMenu />
        </Drawer>
      )}
      <main
        className={clsx(classes.content, {
          [classes.contentShift]: token !== null,
        })}
      >
        <div className={classes.drawerHeader} />
        <Container component="main">{children}</Container>
      </main>
    </div>
  );
}