frontend/src/navigation/SideNavigator.tsx

import { ChevronRight, People, Person } from "@mui/icons-material";
import ChevronLeft from "@mui/icons-material/ChevronLeft";
import { darken, Divider, Grid2 as Grid, IconButton, lighten, List, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, Theme, Toolbar, Tooltip, useTheme } from "@mui/material";
import classNames from "classnames";
import { useWidth } from "../hooks/useWidth";
import { makeStyles } from "@mui/styles";
import BindaptIcon from "../products/Bindapt/BindaptIcon";
import { Link, useLocation } from "react-router-dom";

const drawerWidth = 230;

const useStyles = makeStyles((theme: Theme) => ({
  sideMenu: {
    position: "fixed",
    height: "100%",
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: "nowrap",
    background: theme.palette.background.default
  },
  sideMenuOpened: {
    zIndex: theme.zIndex.drawer + 2,
    width: drawerWidth,
    transition: theme.transitions.create(["width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    })
  },
  sideMenuOnClosed: {
    transition: theme.transitions.create(["width", "z-index", "opacity"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    overflowX: "hidden",
    width: theme.spacing(7),
    zIndex: theme.zIndex.drawer,
    opacity: 0,
    [theme.breakpoints.up("md")]: {
      width: theme.spacing(9),
      opacity: 1
    }
  },
  list: {
    paddingTop: 0
  },
  listItem: {
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(2),
    [theme.breakpoints.up("md")]: {
      paddingLeft: theme.spacing(3),
      paddingRight: theme.spacing(3)
    },
  }, 
  activeItem:
    theme.palette.mode === "light"
      ? {
          background: darken(theme.palette.background.default, 0.25),
          "&:hover": {
            background: darken(theme.palette.background.default, 0.25)
          }
        }
      : {
          background: lighten(theme.palette.background.default, 0.25),
          "&:hover": {
            background: lighten(theme.palette.background.default, 0.25)
          }
        }
}))

interface Props {
  open: boolean;
  onOpen: () => void;
  onClose: () => void;
}
  
export default function SideNavigator(props: Props) {
  const { open, onOpen, onClose } = props;
  const theme = useTheme();
  const width = useWidth();
  const classes = useStyles();
  const location = useLocation();

  const getClasses = (page: string) => {
    if (page === "/device") {
      if (location.pathname.startsWith("/device") ||
      location.pathname.startsWith("/group")) {
        return ({
          root: `${classes.listItem} ${classes.activeItem}`
        })
      }
    }
    if (location.pathname.startsWith(page)) {
      return ({
        root: `${classes.listItem} ${classes.activeItem}`
      })
    }
    return ({
      root: `${classes.listItem}`
    })
  }

  const authenticatedSideMenu = () => {

    return (
      <List className={classes.list} component="nav">
        <Tooltip title="Devices" placement="right">
          <ListItemButton
            id="tour-dashboard"
            component={Link}
            to="/devices"
            onClick={onClose}
            classes={getClasses("/device")}
            >
            <ListItemIcon>
              <BindaptIcon />
            </ListItemIcon>
            {open && <ListItemText primary="Devices" />}
          </ListItemButton>
        </Tooltip>
        <Tooltip title="Teams" placement="right">
          <ListItemButton
            id="tour-dashboard"
            component={Link}
            to="/teams"
            onClick={onClose}
            classes={getClasses("/team")}
            >
            <ListItemIcon>
              <People />
            </ListItemIcon>
            {open && <ListItemText primary="Teams" />}
          </ListItemButton>
        </Tooltip>
        <Tooltip title="Users" placement="right">
          <ListItemButton
            id="tour-dashboard"
            component={Link}
            to="/users"
            onClick={onClose}
            classes={getClasses("/user")}
            >
            <ListItemIcon>
              <Person />
            </ListItemIcon>
            {open && <ListItemText primary="Users" />}
          </ListItemButton>
        </Tooltip>
      </List>
    )
  }

  return (
    <SwipeableDrawer
      variant={width === "xs" || width === "sm" ? "temporary" : "permanent"}
      classes={{
        paper: classNames(
          classes.sideMenu,
          open ? classes.sideMenuOpened : classes.sideMenuOnClosed
        )
      }}
      anchor="left"
      open={open}
      onOpen={onOpen}
      onClose={onClose}
      // disableBackdropTransition={!iOS}
      // disableDiscovery={iOS}>
      >
      <Toolbar >
        <Grid container direction="row" justifyContent={"flex-end"}>
          <Grid>
            <IconButton onClick={onClose} aria-label="onClose side menu">
              {theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
            </IconButton>
          </Grid>
        </Grid>
      </Toolbar>
      <Divider />
      {/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */}
     {authenticatedSideMenu()}
    </SwipeableDrawer>
  );
}