orchetera/template/src/pages/Metadata/DrawerContents.jsx

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

import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
import Divider from "@mui/material/Divider";
import MultiLevelMenu from "../Components/Reusable/MultilevelMenu";
import { Home, Settings } from "@mui/icons-material";
import { Box } from "@mui/material";
import { useTheme } from "@mui/material/styles";

export const menuItems = [
  {
    id: "inbox",
    text: "Inbox",
    icon: <InboxIcon />,
    content: <div>This is Inbox Page</div>,
  },
  {
    id: "starred",
    text: "Starred",
    icon: <MailIcon />,
    content: <div>This is Starred Page</div>,
  },
  {
    id: "send",
    text: "Send email",
    icon: <InboxIcon />,
    content: <div>This is Send Email Page</div>,
  },
  {
    id: "drafts",
    text: "Drafts",
    icon: <MailIcon />,
    content: <div>This is Drafts Page</div>,
  },
  {
    id: "all",
    text: "All mail",
    icon: <InboxIcon />,
    content: <div>This is All Mail Page</div>,
  },
  {
    id: "trash",
    text: "Trash",
    icon: <MailIcon />,
    content: <div>This is Trash Page</div>,
  },
  {
    id: "spam",
    text: "Spam",
    icon: <InboxIcon />,
    content: <div>This is Spam Page</div>,
  },
];

const menuData = [
  {
    name: "Main Menu 1",
    icon: <Home />,
    children: [
      {
        name: "Sub Menu 1.1",
        children: [
          {
            name: "Sub Sub Menu 1.1.1",
            children: [{ name: "Item 1.1.1.1" }, { name: "Item 1.1.1.2" }],
          },
        ],
      },
      {
        name: "Sub Menu 1.2",
        children: [
          { name: "Sub Sub Menu 1.2.1" },
          { name: "Sub Sub Menu 1.2.2" },
        ],
      },
    ],
  },
  {
    name: "Main Menu 1",
    icon: <Home />,
    children: [
      {
        name: "Sub Menu 1.1",
        children: [
          {
            name: "Sub Sub Menu 1.1.1",
            children: [{ name: "Item 1.1.1.1" }, { name: "Item 1.1.1.2" }],
          },
        ],
      },
      {
        name: "Sub Menu 1.2",
        children: [
          { name: "Sub Sub Menu 1.2.1" },
          { name: "Sub Sub Menu 1.2.2" },
        ],
      },
    ],
  },
  {
    name: "Main Menu 2",
    icon: <Settings />,
    children: [{ name: "Sub Menu 2.1" }, { name: "Sub Menu 2.2" }],
  },
];

const DrawerContents = ({ open, activeMenu, setActiveMenu }) => {
  const theme = useTheme();
  return (
    <Box
      sx={{
        height: "calc(100vh - 60px)",
        overflowY: "auto",
        overflowX: "hidden",
      }}
    >
      <List>
        {menuItems.slice(0, 4).map((item) => (
          <ListItem key={item.id} disablePadding sx={{ display: "block" }}>
            <ListItemButton
              selected={activeMenu === item.id}
              onClick={() => setActiveMenu(item.id)}
              sx={{
                minHeight: 48,
                justifyContent: open ? "initial" : "center",
                px: 2.5,
              }}
            >
              <ListItemIcon
                sx={{
                  minWidth: 0,
                  color: theme.palette.primary.contrastText,
                  mr: open ? 3 : "auto",
                  justifyContent: "center",
                }}
              >
                {item.icon}
              </ListItemIcon>
              <ListItemText
                primary={item.text}
                sx={{ opacity: open ? 1 : 0 }}
              />
            </ListItemButton>
          </ListItem>
        ))}
      </List>

      <Divider sx={{ borderColor: theme.palette.primary.contrastText }} />

      <List>
        {menuItems.slice(4).map((item) => (
          <ListItem key={item.id} disablePadding sx={{ display: "block" }}>
            <ListItemButton
              selected={activeMenu === item.id}
              onClick={() => setActiveMenu(item.id)}
              sx={{
                minHeight: 48,
                justifyContent: open ? "initial" : "center",
                px: 2.5,
              }}
            >
              <ListItemIcon
                sx={{
                  color: theme.palette.primary.contrastText,
                  minWidth: 0,
                  mr: open ? 3 : "auto",
                  justifyContent: "center",
                }}
              >
                {item.icon}
              </ListItemIcon>
              <ListItemText
                primary={item.text}
                sx={{ opacity: open ? 1 : 0 }}
              />
            </ListItemButton>
          </ListItem>
        ))}
      </List>

      <MultiLevelMenu menuData={menuData} open={open} />
    </Box>
  );
};

export default DrawerContents;