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 { useMemo, useState } from 'react';
-import {MaterialReactTable} from 'material-react-table';
+import { MaterialReactTable } from 'material-react-table';
-import useTableSetting from "@/lib/hooks/useTableSetting";
+import useTableSetting from '@/lib/hooks/useTableSetting';
-import {Typography} from "@mui/material";
+import { Typography } from '@mui/material';
-
 
 const data = [
     {
@@ -57,118 +56,75 @@ 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(
         () => [
             {
-                accessorKey: 'name.firstName',
                 header: 'نام',
-                size: 150,
+                size: 300,
-                id: "firstName",
+                subHeader: [
-                enableColumnFilter: true,
+                    {
-                datatype: "text",
+                        accessorKey: 'name.firstName',
-                filterFn: "contains",
+                        header: 'نام',
-                columnFilterModeOptions: [
+                        size: 150,
-                    "equals",
+                    },
-                    "notEquals",
+                    {
-                    "contains"
+                        accessorKey: 'name.lastName',
-                ],
+                        header: 'نام خانوادگی',
-            },
+                        size: 150,
-            {
+                    },
-                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 (
         <>
-        <Typography>{settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']}</Typography>
+            <Typography>{settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']}</Typography>
-        <MaterialReactTable
+            <MaterialReactTable
-            columns={columns}
+                columns={columns}
-            data={data}
+                data={data}
-            manualSorting={true}
+                manualSorting={true}
-            initialState={{
+                initialState={{
-                columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+                    columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+                    sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
-            }}
+                }}
-            state={{
+                state={{
-                columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+                    columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+                    sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
-            }}
+                }}
-            onColumnVisibilityChange={onColumnVisibilityChange}
+                onColumnVisibilityChange={onColumnVisibilityChange}
-            onSortingChange={onSortingChange}
+                onSortingChange={onSortingChange}
-        />
+            />
         </>
     );
 };
 
 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