link-stack/apps/bridge-frontend/app/_components/Sidebar.tsx

"use client";

import { FC } from "react";
import {
  Box,
  Grid,
  Typography,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListItemSecondaryAction,
  Drawer,
} from "@mui/material";
import {
  ExpandCircleDown as ExpandCircleDownIcon,
  AccountCircle as AccountCircleIcon,
  Chat as ChatIcon,
  PermPhoneMsg as PhoneIcon,
  WhatsApp as WhatsAppIcon,
  Facebook as FacebookIcon,
} from "@mui/icons-material";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { fonts } from "@/app/_styles/theme";
import LinkLogo from "@/public/link-logo-small.png";
// import { useSession, signOut } from "next-auth/react";

const openWidth = 270;
const closedWidth = 100;

const MenuItem = ({
  name,
  href,
  Icon,
  iconSize,
  inset = false,
  selected = false,
  open = true,
  badge,
  target = "_self",
}: any) => (
  <Link href={href} target={target}>
    <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,
                fontWeight: "bold",
                border: 0,
                textAlign: "left",
                color: "white",
              }}
            >
              {name}
            </Typography>
          }
        />
      )}
      {badge && badge > 0 ? (
        <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>
      ) : null}
    </ListItemButton>
  </Link>
);

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

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

  //  const logout = () => {
  //    signOut({ callbackUrl: "/login" });
  //  };

  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"
        spacing={0}
        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.style.fontFamily,
                }}
              >
                CDR Bridge
              </Typography>
            </Grid>
          )}
        </Grid>
        <Grid item>
          <Box
            sx={{
              height: "0.5px",
              width: "100%",
              backgroundColor: "#666",
              mb: 1,
            }}
          />
        </Grid>
        <Grid
          item
          container
          direction="column"
          sx={{
            mt: "6px",
            overflow: "scroll",
            scrollbarWidth: "none",
            msOverflowStyle: "none",
            "&::-webkit-scrollbar": { display: "none" },
          }}
          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="Whatsapp"
              href="/whatsapp"
              selected={pathname.endsWith("/whatsapp")}
              Icon={WhatsAppIcon}
              iconSize={20}
            />
            <MenuItem
              name="Signal"
              href="/signal"
              selected={pathname.startsWith("/signal")}
              Icon={ChatIcon}
              iconSize={20}
            />
            <MenuItem
              name="Facebook"
              href="/facebook"
              selected={pathname.startsWith("/facebook")}
              Icon={FacebookIcon}
              iconSize={20}
            />
            <MenuItem
              name="Voice"
              href="/voice"
              selected={pathname.startsWith("/voice")}
              Icon={PhoneIcon}
              iconSize={20}
            />
            <MenuItem
              name="Users"
              href="/users"
              selected={pathname.startsWith("/users")}
              Icon={AccountCircleIcon}
              iconSize={20}
            />
          </List>
        </Grid>
      </Grid>
    </Drawer>
  );
};