54 lines
2.1 KiB
JavaScript
54 lines
2.1 KiB
JavaScript
import SidebarSubitems from "@/core/components/SidebarSubitems";
|
|
import { ExpandLess, ExpandMore } from "@mui/icons-material";
|
|
import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
|
|
import Link from "next/link";
|
|
|
|
const SidebarListItems = ({ menuItem, dispatch }) => {
|
|
return (
|
|
<>
|
|
<ListItem disablePadding divider>
|
|
<ListItemButton
|
|
sx={{ py: 1, px: 0.5 }}
|
|
disableGutters
|
|
selected={menuItem.selected}
|
|
component={menuItem.type === "page" ? Link : null}
|
|
href={menuItem.type === "page" ? menuItem.route : null}
|
|
onClick={() => {
|
|
dispatch({ type: "COLLAPSE_MENU", id: menuItem.id });
|
|
}}
|
|
>
|
|
<ListItemIcon
|
|
sx={{
|
|
minWidth: 0,
|
|
justifyContent: "center",
|
|
color: "primary.main",
|
|
width: 40,
|
|
height: 24,
|
|
}}
|
|
>
|
|
{menuItem.icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={menuItem.label} />
|
|
{menuItem.hasSubitems ? menuItem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<Collapse in={menuItem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
|
|
{menuItem.hasSubitems ? (
|
|
<List
|
|
disablePadding
|
|
dense
|
|
sx={{
|
|
background: "#00000008",
|
|
}}
|
|
>
|
|
{menuItem.Subitems.map((subitem, index) => {
|
|
return <SidebarSubitems key={index} dispatch={dispatch} subitem={subitem} />;
|
|
})}
|
|
</List>
|
|
) : null}
|
|
</Collapse>
|
|
</>
|
|
);
|
|
};
|
|
export default SidebarListItems;
|