SideNav

import { useControllableState } from "@enterwell/react-hooks";
import { AppBar, type AppBarProps, Drawer, List, Stack, Toolbar } from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";
import type { ReactNode } from "react";
 
/**
 * The props for the SideNav component
 * @public
 */
export type SideNavProps = AppBarProps & {
  /**
   * @defaultValue 230px
   */
  width?: number | string;
 
  /**
   * @defaultValue 65px
   */
  headerHeight?: number | string;
 
  header?: ReactNode;
 
  endAdorner?: ReactNode;
};
 
/**
 * The SideNav component
 *
 * @param props - The props
 * @returns The react function component.
 * @public
 */
export function SideNav({
  children,
  sx,
  width = 230,
  headerHeight = 65,
  header,
  endAdorner,
  ...rest
}: SideNavProps) {
  const [navOpen, setNavOpen] = useControllableState(false);
  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("md"));
 
  const handleClose = () => setNavOpen(false);
 
  return (
    <>
      <AppBar
        sx={{
          position: "fixed",
          left: 0,
          zIndex: (theme) => theme.zIndex.drawer + 1999,
          borderRadius: 0,
          boxShadow: "none",
          borderBottom: "1px solid",
          borderColor: "divider",
          backgroundImage: "none",
          backgroundColor: "transparent",
          width: {
            xs: "100vw",
            md: width,
          },
          ...sx,
        }}
        {...rest}
      >
        <Toolbar
          sx={(theme) => ({
            zIndex: 1500,
            height: headerHeight,
            width: {
              md: width,
              xs: "100vw",
            },
            padding: {
              xs: 1.5,
              md: theme.spacing(1.5, 2.5),
            },
          })}
        >
          {header}
        </Toolbar>
      </AppBar>
      <Drawer
        anchor="top"
        open={navOpen}
        variant={isMobile ? "temporary" : "permanent"}
        onClose={handleClose}
        slotProps={{
          paper: {
            sx: {
              borderRadius: 0,
              backgroundImage: "none",
              height: {
                md: "100vh",
                xs: navOpen ? "100vh" : 0,
              },
              width: {
                xs: "100vw",
                md: width,
              },
            },
          },
        }}
      >
        <Toolbar />
        <Stack height={1} justifyContent="space-between">
          <nav>
            <List sx={{ paddingX: 1.25, paddingY: 2 }}>{children}</List>
          </nav>
          {endAdorner}
        </Stack>
      </Drawer>
    </>
  );
}