update

src/core/components/SidebarMenu.jsx

@@ -7,11 +7,29 @@ import { useEffect, useReducer, useState } from "react";
 import { filterMenuItems } from "../utils/filterMenuItems";
 import { pageMenu } from "../utils/pageMenu";
 
+function selectPage(item, route) {
+    if (item.type === "page") {
+        return {
+            ...item,
+            selected: item.route === route,
+            showSubitems: item.route === route,
+        };
+    } else if (item.Subitems && Array.isArray(item.Subitems)) {
+        const updatedSubitems = item.Subitems.map(subitem => selectPage(subitem, route));
+        return {
+            ...item,
+            Subitems: updatedSubitems,
+            showSubitems: updatedSubitems.some(subitem => subitem.showSubitems || subitem.route === route),
+        };
+    }
+    return item;
+}
+
 function reducer(state, action) {
     switch (action.type) {
         case "UPDATE_MENU":
             const _permissions = action.permissions || []
-            const filteredPageMenu = filterMenuItems(pageMenu, ['all', ..._permissions])
+            const filteredPageMenu = filterMenuItems(state, ['all', ..._permissions])
             return filteredPageMenu
         case "COLLAPSE_MENU":
             return state.map((item) =>
@@ -62,40 +80,7 @@ function reducer(state, action) {
                     : item;
             });
         case "SELECTED":
-            return state.map((item) => {
-                return item.type === "page"
-                    ? {
-                        ...item,
-                        selected: action.route === item.route,
-                        showSubitems: item.route === action.route,
-                    }
-                    : item.Subitems && Array.isArray(item.Subitems)
-                        ? {
-                            ...item,
-                            Subitems: item.Subitems.map((subitem) => {
-                                return subitem.type === "page"
-                                    ? {
-                                        ...subitem,
-                                        selected: action.route === subitem.route,
-                                        showSubitems: subitem.route === action.route,
-                                    }
-                                    : subitem.Subitems && Array.isArray(subitem.Subitems)
-                                        ? {
-                                            ...subitem,
-                                            Subitems: subitem.Subitems.map((secondSubItem) => ({
-                                                ...secondSubItem,
-                                                selected: secondSubItem.route === action.route,
-                                            })),
-                                            showSubitems: subitem.Subitems.some(
-                                                (secondSubItem) => secondSubItem.route === action.route
-                                            ),
-                                        }
-                                        : subitem;
-                            }),
-                            showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
-                        }
-                        : item;
-            });
+            return state.map(item => selectPage(item, action.route));
 
         default:
             throw new Error();
@@ -109,13 +94,15 @@ const SidebarMenu = () => {
     const [selectedKey, setSelectedKey] = useState(null);
 
     useEffect(() => {
+        dispatch({ type: "SELECTED", route: pathname });
+        setSelectedKey(pathname);
+    }, [userPermissions, pathname]);
+
+    useEffect(() => {
+        if (!userPermissions) return
         dispatch({ type: 'UPDATE_MENU', permissions: userPermissions });
     }, [userPermissions])
 
-    useEffect(() => {
-        dispatch({ type: "SELECTED", route: pathname });
-        setSelectedKey(pathname);
-    }, [pathname]);
 
     useEffect(() => {
         selectedKey &&
@@ -126,11 +113,13 @@ const SidebarMenu = () => {
     }, [selectedKey]);
 
     return (
-        <List disablePadding dense>
-            {menuItems.map((menuItem) => {
-                return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
-            })}
-        </List>
+        userPermissions && (
+            <List disablePadding dense>
+                {menuItems.map((menuItem) => {
+                    return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
+                })}
+            </List>
+        )
     );
 };
 export default SidebarMenu;