nested sidebar

src/core/components/SidebarListItem.jsx

@@ -0,0 +1,29 @@
+import {Collapse, ListItem, ListItemButton, ListItemText} from "@mui/material";
+import SidebarSubitem from "@/core/components/SidebarSubitem";
+import {useState} from "react";
+
+const SidebarListItem = ({menuItem, dispatch}) => {
+    const [open, setOpen] = useState(false)
+    return(
+        <>
+            <ListItem>
+                <ListItemText primary={menuItem.id}></ListItemText>
+                <ListItemButton onClick={() => {
+                    dispatch({type: "COLLAPSE_MENU", id: menuItem.id})
+                    setOpen(!open)
+                }}>click</ListItemButton>
+            </ListItem>
+            <Collapse in={menuItem.showSubitems}>
+                {
+                    menuItem.hasSubitems ?  (menuItem.Subitems.map((subitem,index)=>{
+                        return(
+                            <SidebarSubitem dispatch={dispatch} key={index} subitem={subitem} open={open}/>
+                        )
+                    })) : null
+                }
+            </Collapse>
+
+        </>
+    )
+}
+export default SidebarListItem

src/core/components/SidebarSubitem.jsx

@@ -0,0 +1,33 @@
+import {Collapse, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
+import {useState} from "react";
+
+const SidebarSubitem = ({subitem, dispatch}) => {
+    const [subOpen, setSubOpen] = useState(false)
+    return(
+        <>
+            <List>
+                <ListItem>
+                    <ListItemText primary={subitem.firstName} />
+                    {subitem.hasSubitems ? (<ListItemButton onClick={() => {
+                        dispatch({type: "Subitem1", id: subitem.id})
+                        setSubOpen(!subOpen)
+                    }}>click</ListItemButton>) : null}
+                </ListItem>
+            </List>
+            {
+                subitem.hasSubitems ? (subitem.Subitems.map((subSubitem,index) => {
+                    return(
+                        <Collapse key={index} in={subitem.showSubitems}>
+                            <List>
+                                <ListItem>
+                                    <ListItemText primary={subSubitem.shahrokh} />
+                                </ListItem>
+                            </List>
+                        </Collapse>
+                    )
+                })) : null
+            }
+        </>
+    )
+}
+export default SidebarSubitem

src/core/components/SidebarTest.jsx

@@ -0,0 +1,56 @@
+"use client"
+import {List} from "@mui/material";
+import SidebarListItem from "@/core/components/SidebarListItem";
+import {useReducer} from "react";
+const data = [
+    {
+        id : "hello",
+        Subitems : [
+            {id : "amin",firstName : "amin", lastName:"ali",Subitems : [{id : "shahrokh",shahrokh : "shahrokh"}], hasSubitems : true, showSubitems : false},
+            {id : "amir",firstName : "amir", lastName:"akbar", hasSubitems : false, showSubitems : false},
+        ],
+        hasSubitems : true,
+        showSubitems : false
+    },
+    {
+        id : "hi",
+        Subitems : [
+            {id : "ali",firstName : "ali", lastName:"ali", hasSubitems : false, showSubitems : false},
+            {id : "akbar",firstName : "akbar", lastName:"akbar", hasSubitems : false, showSubitems : false},
+        ],
+        hasSubitems : true,
+        showSubitems : false
+    }
+]
+function reducer(state, action) {
+    switch (action.type) {
+        case "COLLAPSE_MENU":
+            return state.map((item) => action.id == item.id ? {
+                ...item, showSubitems: !item.showSubitems
+            } : item)
+        case "Subitem1" :
+            return state.map((item) => {
+                return item.hasSubitems ? {...item, Subitems: item.Subitems.map((subitem) => action.id === subitem.id ? {
+                        ...subitem, showSubitems: !subitem.showSubitems
+                    } : subitem)} : item
+            })
+        default:
+            throw new Error();
+    }
+}
+
+const SidebarTest = () => {
+    const [itemMenu, dispatch] = useReducer(reducer, data);
+    return(
+        <List sx={{maxWidth : 500}}>
+            {
+                itemMenu.map((menuItem) => {
+                    return(
+                        <SidebarListItem dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />
+                    )
+                })
+            }
+        </List>
+    )
+}
+export default SidebarTest