84 lines
3.8 KiB
JavaScript
84 lines
3.8 KiB
JavaScript
import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
|
|
import { ExpandLess, ExpandMore } from "@mui/icons-material";
|
|
|
|
const SidebarSubitems = ({ subitem, dispatch }) => {
|
|
return (
|
|
<>
|
|
<List disablePadding>
|
|
<ListItem disablePadding>
|
|
<ListItemButton
|
|
sx={{
|
|
"&.Mui-selected": {
|
|
backgroundColor: "rgba(0, 0, 0, 0.1)",
|
|
},
|
|
}}
|
|
selected={subitem.selected}
|
|
onClick={() => {
|
|
dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
|
|
}}
|
|
>
|
|
<ListItemIcon
|
|
sx={{
|
|
minWidth: 0,
|
|
justifyContent: "center",
|
|
color: "primary.main",
|
|
width: 40,
|
|
height: 24,
|
|
pr: 2,
|
|
}}
|
|
>
|
|
{subitem.icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={subitem.firstName} />
|
|
{subitem.hasSubitems ? subitem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
{subitem.hasSubitems
|
|
? subitem.Subitems.map((subSubitem, index) => {
|
|
return (
|
|
<Collapse
|
|
key={index}
|
|
in={subitem.showSubitems}
|
|
timeout="auto"
|
|
mountOnEnter={true}
|
|
unmountOnExit={true}
|
|
>
|
|
<List disablePadding>
|
|
<ListItem disablePadding>
|
|
<ListItemButton
|
|
onClick={() => {
|
|
dispatch({ type: "COLLAPSE_SUB_SECOND_ITEMS", id: subSubitem.id });
|
|
}}
|
|
selected={subSubitem.selected}
|
|
sx={{
|
|
"&.Mui-selected": {
|
|
backgroundColor: "rgba(0, 0, 0, 0.05)",
|
|
},
|
|
}}
|
|
>
|
|
<ListItemIcon
|
|
sx={{
|
|
minWidth: 0,
|
|
justifyContent: "center",
|
|
color: "primary.main",
|
|
width: 40,
|
|
height: 24,
|
|
pr: 2,
|
|
}}
|
|
>
|
|
{subSubitem.icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={subSubitem.shahrokh} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</Collapse>
|
|
);
|
|
})
|
|
: null}
|
|
</>
|
|
);
|
|
};
|
|
export default SidebarSubitems;
|