orchetera/template/src/pages/Components/Drawer.jsx

Welcome to **Orchetera** — your orchestration tool to kickstart Firebase-ready projects with ease!

import { useState } from "react";
import { styled, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import MuiDrawer from "@mui/material/Drawer";
import CssBaseline from "@mui/material/CssBaseline";
import MuiAppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import { Button, Typography } from "@mui/material";
import DrawerContents, { menuItems } from "../Metadata/DrawerContents";
import {
  AccountCircleOutlined,
  KeyboardDoubleArrowLeft,
  KeyboardDoubleArrowRight,
  RocketLaunch,
} from "@mui/icons-material";
import ActionableButton from "./Reusable/ActionableButton";
import ListGenerator from "./Reusable/ListGenerator";
import accountsMenu from "../Metadata/AccountsMenu";

const drawerWidth = 260;
const miniDrawerWidth = 65;

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
  zIndex: 1000,
  backgroundColor: theme.palette.primary.main,
  transition: theme.transitions.create(["width", "margin"], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  padding: theme.spacing(0, 1),
  ...theme.mixins.toolbar,
}));

const DrawerComponent = ({
  title = "Application",
  open: controlledOpen,
  onDrawerToggle,
}) => {
  const theme = useTheme();
  const [localOpen, setLocalOpen] = useState(true);
  const [activeMenu, setActiveMenu] = useState(null);

  // Use controlled open state if provided, otherwise use local state
  const isControlled = typeof controlledOpen !== "undefined";
  const open = isControlled ? controlledOpen : localOpen;

  const handleDrawerToggle = () => {
    if (isControlled) {
      onDrawerToggle && onDrawerToggle(!open);
    } else {
      setLocalOpen(!open);
    }
  };

  const defaultContent = <div>Welcome! Select a menu item</div>;
  const activeContent = activeMenu
    ? menuItems.find((item) => item.id === activeMenu)?.content
    : defaultContent;

  return (
    <Box sx={{ display: "flex" }}>
      <CssBaseline />
      <AppBar position="fixed" open={open} elevation={0}>
        <Toolbar
          sx={{
            justifyContent: "space-between",
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
            }}
          >
            {!open && (
              <IconButton
                color="inherit"
                aria-label="open drawer"
                onClick={handleDrawerToggle}
                edge="start"
                sx={{ marginRight: 5 }}
              >
                <RocketLaunch sx={{ color: "inherit" }} fontSize="large" />
              </IconButton>
            )}

            <Typography variant="h6" noWrap component="div">
              {title}
            </Typography>
          </Box>

          <Box>
            <ActionableButton
              popupType="popover"
              color={theme.palette.primary.contrastText}
              icon={<AccountCircleOutlined />}
              label="Account"
              title="Account Settings"
              content={
                <ListGenerator
                  items={accountsMenu}
                  iconPosition="right"
                  textVariant="body1"
                  sx={{ width: 250 }}
                />
              }
              actions={[<Button closeTrigger={true}>Close</Button>]}
            />
          </Box>
        </Toolbar>
      </AppBar>
      <MuiDrawer
        variant="permanent"
        slotProps={{
          paper: {
            sx: {
              borderRight: 0,
              boxShadow: "0 0 10px #b5b5b5",
            },
          },
        }}
        sx={{
          zIndex: 900,
          width: open ? drawerWidth : miniDrawerWidth,
          flexShrink: 0,
          whiteSpace: "nowrap",
          boxSizing: "border-box",
          "& .MuiDrawer-paper": {
            width: open ? drawerWidth : miniDrawerWidth,
            overflow: "hidden",
            backgroundColor: theme.palette.primary.dark,
            color: theme.palette.primary.contrastText,
            transition: theme.transitions.create("width", {
              easing: theme.transitions.easing.sharp,
              duration: open
                ? theme.transitions.duration.enteringScreen
                : theme.transitions.duration.leavingScreen,
            }),
          },
        }}
      >
        <DrawerHeader
          sx={{
            backgroundColor: theme.palette.primary.main,
            color: "white",
            justifyContent: "space-between",
          }}
        >
          <Box sx={{ textAlign: "center", width: "100%" }}>
            <RocketLaunch sx={{ color: "inherit" }} fontSize="large" />
          </Box>
          <IconButton sx={{ color: "inherit" }} onClick={handleDrawerToggle}>
            {theme.direction === "rtl" ? (
              <KeyboardDoubleArrowRight />
            ) : (
              <KeyboardDoubleArrowLeft />
            )}
          </IconButton>
        </DrawerHeader>
        <DrawerContents
          open={open}
          activeMenu={activeMenu}
          setActiveMenu={setActiveMenu}
        />
      </MuiDrawer>
      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
        <DrawerHeader />
        {activeContent}
      </Box>
    </Box>
  );
};

export default DrawerComponent;