link-stack/apps/link/components/Sidebar.tsx

import { FC, useState } from "react";
import {
  Box,
  Grid,
  Typography,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListItemSecondaryAction,
  Drawer,
  Collapse,
} from "@mui/material";
import {
  FeaturedPlayList as FeaturedPlayListIcon,
  Person as PersonIcon,
  Analytics as AnalyticsIcon,
  Logout as LogoutIcon,
  Cottage as CottageIcon,
  Settings as SettingsIcon,
  ExpandCircleDown as ExpandCircleDownIcon,
} from "@mui/icons-material";
import { useRouter } from "next/router";
import Link from "next/link";
import Image from "next/image";
import LinkLogo from "public/link-logo-small.png";
import { useSession } from "next-auth/react";

const openWidth = 270;
const closedWidth = 100;

const MenuItem = ({
  name,
  href,
  Icon,
  iconSize,
  inset = false,
  selected = false,
  open = true,
  badge,
}: any) => (
  <Link href={href}>
    <ListItemButton
      sx={{
        p: 0,
        mb: 1,
        bl: iconSize === 0 ? "1px solid white" : "inherit",
      }}
      selected={selected}
    >
      {iconSize > 0 ? (
        <ListItemIcon
          sx={{
            color: `white`,
            minWidth: 0,
            mr: 2,
            textAlign: "center",
            margin: open ? "0 8 0 0" : "0 auto",
          }}
        >
          <Box
            sx={{
              width: iconSize,
              height: iconSize,
              mr: 0.5,
              mt: "-4px",
            }}
          >
            <Icon />
          </Box>
        </ListItemIcon>
      ) : (
        <Box
          sx={{
            width: 30,
            height: "28px",
            position: "relative",
            ml: "9px",
            mr: "1px",
          }}
        >
          <Box
            sx={{
              width: "1px",
              height: "56px",
              backgroundColor: "white",
              position: "absolute",
              left: "3px",
              top: "-10px",
            }}
          />
          <Box
            sx={{
              width: "42px",
              height: "42px",
              position: "absolute",
              top: "-27px",
              left: "3px",
              border: "solid 1px #fff",
              borderColor: "transparent transparent transparent #fff",
              borderRadius: "60px",
              rotate: "-35deg",
            }}
          />
        </Box>
      )}
      {open && (
        <ListItemText
          inset={inset}
          primary={
            <Typography
              variant="body1"
              sx={{
                fontSize: 16,
                fontFamily: "Roboto",
                fontWeight: "bold",
                border: 0,
                textAlign: "left",
                color: "white"
              }}
            >
              {name}
            </Typography>
          }
        />
      )}
      {badge && (
        <ListItemSecondaryAction>
          <Typography
            color="textSecondary"
            variant="body1"
            className="badge"
            sx={{
              backgroundColor: "#FFB620",
              color: "black !important",
              borderRadius: 10,
              px: 1,
              fontSize: 12,
              fontWeight: "bold",
            }}
          >
            {badge}
          </Typography>
        </ListItemSecondaryAction>
      )}
    </ListItemButton>
  </Link>
);

interface SidebarProps {
  open: boolean;
  setOpen: (open: boolean) => void;
}

export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
  const { pathname } = useRouter();
  const { data: session } = useSession()
  const username = session?.user?.name || "User"

  return (
    <Drawer
      sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
      variant="permanent"
      anchor="left"
      open={open}
      PaperProps={{
        sx: {
          width: open ? openWidth : closedWidth,
          border: 0,
          overflow: "visible",
        },
      }}
    >
      <Box
        sx={{
          position: "absolute",
          top: 20,
          right: open ? -8 : -16,
          color: "#1C75FD",
          rotate: open ? "90deg" : "-90deg",
        }}
        onClick={() => {
          setOpen!(!open);
        }}
      >
        <ExpandCircleDownIcon
          sx={{
            width: 30,
            height: 30,
            background: "white",
            borderRadius: 500,
          }}
        />
      </Box>
      <Grid
        container
        direction="column"
        justifyContent="space-between"
        wrap="nowrap"
        sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
      >
        <Grid item container>
          <Grid item sx={{ width: open ? "40px" : "100%" }}>
            <Box
              sx={{
                width: "40px",
                height: "40px",
                margin: open ? "0" : "0 auto",
              }}
            >
              <Image
                src={LinkLogo}
                alt="Link logo"
                width={40}
                height={40}
                style={{
                  objectFit: "cover",
                  filter: "grayscale(100) brightness(100)",
                }}
              />
            </Box>
            .
          </Grid>
          {open && (
            <Grid item>
              <Typography
                variant="h2"
                sx={{
                  fontSize: 26,
                  color: "white",
                  fontWeight: 700,
                  mt: 1,
                  ml: 0.5,
                  fontFamily: "Poppins",
                }}
              >
                CDR Link
              </Typography>
            </Grid>
          )}
        </Grid>
        <Grid item>
          <Box
            sx={{
              height: "0.5px",
              width: "100%",
              backgroundColor: "#666",
              mb: 1,
            }}
          />
        </Grid>
        <Grid item>
          <Typography
            variant="h6"
            sx={{
              fontSize: 12,
              color: "#999",
              fontWeight: "bold",
              textAlign: open ? "left" : "center",
            }}
          >
            Hello
          </Typography>
        </Grid>
        <Grid item>
          <Typography
            variant="h2"
            sx={{
              fontSize: 22,
              color: "white",
              mb: 1.5,
              fontWeight: "bold",
              textAlign: open ? "left" : "center",
            }}
          >
            {open
              ? username
              : username
                .split(" ")
                .map((name) => name.substring(0, 1))
                .join("")}
          </Typography>
        </Grid>
        <Grid item>
          <Box
            sx={{ height: "0.5px", width: "100%", backgroundColor: "#666" }}
          />
        </Grid>
        <Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
          <List
            component="nav"
            sx={{
              a: {
                textDecoration: "none",

                ".MuiListItemButton-root": {
                  p: 1,
                  borderRadius: 2,
                  "&:hover": {
                    background: "#555",
                  },
                  ".MuiTypography-root": {
                    p: {
                      color: "#999 !important",
                      fontSize: 16,
                    },
                  },
                  ".badge": {
                    p: { fontSize: 12, color: "black !important" },
                  },
                },
                ".Mui-selected": {
                  background: "#444",
                  color: "#fff !important",
                  ".MuiTypography-root": {
                    p: {
                      color: "#fff !important",
                      fontSize: 16,
                    },
                  },
                  ".badge": {
                    p: { fontSize: 12, color: "black !important" },
                  },
                },
              },
            }}
          >
            <MenuItem
              name="Home"
              href="/"
              Icon={CottageIcon}
              iconSize={20}
              selected={pathname.endsWith("/")}
              open={open}
            />
            <MenuItem
              name="Tickets"
              href="/tickets/assigned"
              Icon={FeaturedPlayListIcon}
              selected={pathname.startsWith("/tickets")}
              iconSize={20}
              open={open}
            />

            <Collapse
              in={pathname.startsWith("/tickets")}
              timeout="auto"
              unmountOnExit
              onClick={undefined}
            >
              <List component="div" disablePadding>
                <MenuItem
                  name="Assigned"
                  href="/tickets/assigned"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/assigned")}
                  badge={3}
                  open={open}
                />
                <MenuItem
                  name="Urgent"
                  href="/tickets/urgent"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/urgent")}
                  badge={1}
                  open={open}
                />
                <MenuItem
                  name="Pending"
                  href="/tickets/pending"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/pending")}
                  badge={9}
                  open={open}
                />
                <MenuItem
                  name="Unassigned"
                  href="/tickets/unassigned"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/unnassigned")}
                  badge={27}
                  open={open}
                />
                <MenuItem
                  name="New Ticket UI"
                  href="/tickets/2"
                  Icon={SettingsIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/2")}
                  open={open}
                />
              </List>
            </Collapse>

            <MenuItem
              name="Leafcutter"
              href="/leafcutter"
              Icon={AnalyticsIcon}
              iconSize={20}
              selected={pathname.endsWith("/leafcutter")}
              open={open}
            />
            <Collapse
              in={pathname.startsWith("/leafcutter")}
              timeout="auto"
              unmountOnExit
              onClick={undefined}
            >
              <List component="div" disablePadding>
                <MenuItem
                  name="Dashboard"
                  href="/leafcutter"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter")}
                  open={open}
                />

                <MenuItem
                  name="Search and Create"
                  href="/leafcutter/create"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/create")}
                  open={open}
                />

                <MenuItem
                  name="Trends"
                  href="/leafcutter/trends"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/trends")}
                  open={open}
                />

                <MenuItem
                  name="FAQ"
                  href="/leafcutter/faq"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/faq")}
                  open={open}
                />

                <MenuItem
                  name="About"
                  href="/leafcutter/about"
                  Icon={AnalyticsIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/about")}
                  open={open}
                />
              </List>
            </Collapse>
            <MenuItem
              name="Profile"
              href="/profile"
              Icon={PersonIcon}
              iconSize={20}
              selected={pathname.endsWith("/profile")}
              open={open}
            />
            <MenuItem
              name="Admin"
              href="/admin/zammad"
              Icon={SettingsIcon}
              iconSize={20}
              open={open}
            />
            <Collapse
              in={pathname.startsWith("/admin/")}
              timeout="auto"
              unmountOnExit
              onClick={undefined}
            >
              <List component="div" disablePadding>
                <MenuItem
                  name="Zammad Settings"
                  href="/admin/zammad"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/admin/zammad")}
                  open={open}
                />
                <MenuItem
                  name="Metamigo"
                  href="/admin/metamigo"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/admin/metamigo")}
                  open={open}
                />
                <MenuItem
                  name="Label Studio"
                  href="/admin/label-studio"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/admin/label-studio")}
                  open={open}
                />
              </List>
            </Collapse>

            <MenuItem
              name="Logout"
              href="/logout"
              Icon={LogoutIcon}
              iconSize={20}
              open={open}
            />
          </List>
        </Grid>
      </Grid>
    </Drawer>
  );
};