83 lines
3.4 KiB
JavaScript
83 lines
3.4 KiB
JavaScript
import { ExpandLess, ExpandMore } from "@mui/icons-material";
|
|
import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack, useMediaQuery, useTheme } from "@mui/material";
|
|
import Link from "next/link";
|
|
import SidebarBadge from "./SidebarBadge";
|
|
|
|
const SidebarSubitems = ({ subitem, dispatch, handleDrawerClose }) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
|
|
return (
|
|
<>
|
|
<ListItem disablePadding divider>
|
|
<ListItemButton
|
|
disableGutters
|
|
sx={{ p: 0.5, pl: 1 }}
|
|
selected={subitem.selected}
|
|
component={subitem.type === "page" ? Link : null}
|
|
href={subitem.type === "page" ? subitem.route : null}
|
|
onClick={() => {
|
|
if (subitem.type !== "page") {
|
|
dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
|
|
} else {
|
|
if (isMobile) {
|
|
handleDrawerClose()
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<ListItemIcon
|
|
sx={{
|
|
minWidth: 0,
|
|
justifyContent: "center",
|
|
width: 40,
|
|
height: 24,
|
|
}}
|
|
>
|
|
{subitem.icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={subitem.label} />
|
|
{subitem.badges && (
|
|
<Stack direction={"row"} sx={{ px: 0.5 }} spacing={0.5}>
|
|
{subitem.badges.map((badge, i) => (
|
|
<SidebarBadge
|
|
chipProps={{
|
|
color: badge.color || "default",
|
|
variant: "outlined",
|
|
}}
|
|
key={badge.key}
|
|
badge={badge.key}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
{subitem.hasSubitems ? (
|
|
subitem.showSubitems ? (
|
|
<ExpandLess />
|
|
) : (
|
|
<ExpandMore />
|
|
)
|
|
) : (
|
|
<Box sx={{ width: 29 }} />
|
|
)}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<Collapse in={subitem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
|
|
{subitem.hasSubitems ? (
|
|
<List
|
|
disablePadding
|
|
dense
|
|
sx={{
|
|
background: "#00000008",
|
|
}}
|
|
>
|
|
{subitem.Subitems.map((subSubitem, index) => {
|
|
return <SidebarSubitems handleDrawerClose={handleDrawerClose} key={index} dispatch={dispatch} subitem={subSubitem} />;
|
|
})}
|
|
</List>
|
|
) : null}
|
|
</Collapse>
|
|
</>
|
|
);
|
|
};
|
|
export default SidebarSubitems;
|