update
This commit is contained in:
@@ -1,74 +1,75 @@
|
||||
import {Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
|
||||
import {ExpandLess, ExpandMore} from "@mui/icons-material";
|
||||
import { ExpandLess, ExpandMore } from "@mui/icons-material";
|
||||
import {
|
||||
Collapse,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
} from "@mui/material";
|
||||
import Link from "next/link";
|
||||
|
||||
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
|
||||
const SidebarSubitems = ({ subitem, dispatch }) => {
|
||||
return (
|
||||
<>
|
||||
<ListItem disablePadding divider>
|
||||
<ListItemButton
|
||||
disableGutters
|
||||
sx={{ py: 1, px: 0.5, pl: 1 }}
|
||||
selected={subitem.selected}
|
||||
component={subitem.type === "page" ? Link : null}
|
||||
href={subitem.type === "page" ? subitem.route : null}
|
||||
onClick={() => {
|
||||
dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
|
||||
}}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: 0,
|
||||
justifyContent: "center",
|
||||
width: 40,
|
||||
height: 24,
|
||||
}}
|
||||
>
|
||||
{subitem.icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={subitem.label} />
|
||||
{subitem.hasSubitems ? (
|
||||
subitem.showSubitems ? (
|
||||
<ExpandLess />
|
||||
) : (
|
||||
<ExpandMore />
|
||||
)
|
||||
) : null}
|
||||
</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
|
||||
key={index}
|
||||
dispatch={dispatch}
|
||||
subitem={subSubitem}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
) : null}
|
||||
</Collapse>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default SidebarSubitems;
|
||||
|
||||
Reference in New Issue
Block a user