link-stack/components/Sidebar.tsx

import { FC } from "react";
import {
  Box,
  Grid,
  Typography,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Drawer,
  Accordion,
  AccordionSummary,
  AccordionDetails,
} from "@mui/material";
import {
  FeaturedPlayList as FeaturedPlayListIcon,
  Person as PersonIcon,
  Analytics as AnalyticsIcon,
  Logout as LogoutIcon,
  Cottage as CottageIcon,
  Settings as SettingsIcon,
} from "@mui/icons-material";
import Link from "next/link";

const MenuItem = ({ name, href, Icon, iconSize, indent = 0 }: any) => (
  <Link href={href} passHref>
    <ListItem button sx={{ p: 0, pb: 2, pr: indent * 5 }}>
      <ListItemIcon
        sx={{
          color: `white`,
        }}
      >
        <Box
          sx={{
            width: iconSize,
            height: iconSize,
            mr: 0.5,
          }}
        >
          {iconSize > 0 && <Icon />}
        </Box>

        <ListItemText
          primary={
            <Typography
              variant="body1"
              sx={{
                color: "#fff !important",
                fontSize: 14,
                fontFamily: "Roboto",
                fontWeight: 400,
                marginLeft: "12px",
                marginTop: "-1px",
                textDecoration: "none !important",
                ">a": {
                  textDecoration: "none !important",
                },
                "a:visited": {
                  textDecoration: "none !important",
                },
                border: 0,
              }}
            >
              {name}
            </Typography>
          }
        />
      </ListItemIcon>
    </ListItem>
  </Link>
);

interface SidebarProps {
  open: boolean;
}

export const Sidebar: FC<SidebarProps> = ({ open }) => (
  <Drawer
    sx={{ width: 300, flexShrink: 0 }}
    variant="permanent"
    anchor="left"
    open={open}
    PaperProps={{
      sx: {
        width: 300,
        border: 0,
      },
    }}
  >
    <Grid
      container
      direction="column"
      justifyContent="space-between"
      wrap="nowrap"
      sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
    >
      <Grid item>
        <Typography variant="h6" sx={{ fontSize: 12, color: "white" }}>
          Hello
        </Typography>
      </Grid>
      <Grid item>
        <Typography variant="h2" sx={{ fontSize: 22, color: "white", mb: 1.5 }}>
          Agent/User
        </Typography>
      </Grid>
      <Grid item>
        <Box sx={{ height: 1.5, width: "100%", backgroundColor: "white" }} />
      </Grid>
      <Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
        <List component="nav">
          <MenuItem name="Home" href="/" Icon={CottageIcon} iconSize={20} />
          <Accordion
            sx={{
              backgroundColor: "#25272A",
              border: 0,
              m: 0,
              p: 0,
              boxShadow: "none",
              mt: -1,
              mb: -1,
            }}
          >
            <AccordionSummary sx={{ p: 0, m: 0 }}>
              <MenuItem
                name="My tickets"
                href="/assigned"
                Icon={FeaturedPlayListIcon}
                iconSize={20}
              />
            </AccordionSummary>
            <AccordionDetails sx={{ p: 0, mt: -2, ml: "20px" }}>
              <MenuItem
                name="Assigned"
                href="/assigned"
                Icon={FeaturedPlayListIcon}
                iconSize={0}
              />
              <MenuItem
                name="Urgent"
                href="/urgent"
                Icon={FeaturedPlayListIcon}
                iconSize={0}
              />
              <MenuItem
                name="Pending"
                href="/pending"
                Icon={FeaturedPlayListIcon}
                iconSize={0}
              />
              <MenuItem
                name="Unassigned"
                href="/unassigned"
                Icon={FeaturedPlayListIcon}
                iconSize={0}
              />
            </AccordionDetails>
          </Accordion>

          <MenuItem
            name="Leafcutter"
            href="/leafcutter"
            Icon={AnalyticsIcon}
            iconSize={20}
          />
          <MenuItem
            name="Profile"
            href="/profile"
            Icon={PersonIcon}
            iconSize={20}
          />
          <MenuItem
            name="Settings"
            href="/settings"
            Icon={SettingsIcon}
            iconSize={20}
          />
          <MenuItem
            name="Logout"
            href="/logout"
            Icon={LogoutIcon}
            iconSize={20}
          />
        </List>
      </Grid>
    </Grid>
  </Drawer>
);