nested sidebar

src/app/page.js

@@ -1,8 +1,8 @@
-import DataTableTest from "@/components/DataTableTest";
+import SidebarTest from "@/core/components/SidebarTest";
 
 function page() {
     return (
-        <DataTableTest/>
+        <SidebarTest/>
     );
 }
 

src/components/DataTableTest.jsx

@@ -1,9 +1,8 @@
 "use client"
 import { useMemo, useState } from 'react';
 import { MaterialReactTable } from 'material-react-table';
-import useTableSetting from "@/lib/hooks/useTableSetting";
-import {Typography} from "@mui/material";
-
+import useTableSetting from '@/lib/hooks/useTableSetting';
+import { Typography } from '@mui/material';
 
 const data = [
     {
@@ -57,96 +56,54 @@ const TestDataTable = () => {
     const [userId, setUserId] = useState(2);
     const [pageName, setPageName] = useState('loan');
     const [tableName, setTableName] = useState('loan_table');
-    const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
+    const { settingStore, hideAction, filterAction, sortAction } = useTableSetting();
 
     const columns = useMemo(
         () => [
+            {
+                header: 'نام',
+                size: 300,
+                subHeader: [
                     {
                         accessorKey: 'name.firstName',
                         header: 'نام',
                         size: 150,
-                id: "firstName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
                     },
                     {
                         accessorKey: 'name.lastName',
                         header: 'نام خانوادگی',
                         size: 150,
-                id: "lastName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
+                    },
                 ],
             },
             {
                 accessorKey: 'address',
                 header: 'آدرس',
                 size: 200,
-                id: "address",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
             },
             {
                 accessorKey: 'city',
                 header: 'شهر',
                 size: 150,
-                id: "city",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "between",
-                ],
-
             },
             {
                 accessorKey: 'state',
                 header: 'وضعیت',
                 size: 150,
-                id: "state",
-                text:'نام',
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
             },
         ],
-        [],
+        []
     );
+
     const onColumnVisibilityChange = (event) => {
         const settingValue = event();
         hideAction(userId, pageName, tableName, settingValue, columns);
     };
+
     const onSortingChange = (event) => {
         const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
         sortAction(userId, pageName, tableName, settingValue, columns);
-    }
+    };
 
     return (
         <>
@@ -157,11 +114,11 @@ const TestDataTable = () => {
                 manualSorting={true}
                 initialState={{
                     columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+                    sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
                 }}
                 state={{
                     columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+                    sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
                 }}
                 onColumnVisibilityChange={onColumnVisibilityChange}
                 onSortingChange={onSortingChange}
@@ -171,4 +128,3 @@ const TestDataTable = () => {
 };
 
 export default TestDataTable;
-

src/components/MapTest.jsx

@@ -0,0 +1,41 @@
+"use client"
+import {Typography} from "@mui/material";
+
+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
+    }
+]
+const MapTest = () => {
+    const Amin =  data.map((item) => {
+        return item.hasSubitems ? {...item, Subitems: item.Subitems.map((subitem) => true ? {
+                ...subitem, showSubitems: !item.showSubitems
+            } : subitem)} : item
+    })
+
+
+    console.log(Amin)
+
+
+    return (
+        <>
+            <Typography>hello</Typography>
+        </>
+    )
+}
+export default MapTest

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