@campxdev/react-blueprint 2.1.12 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.1.12",
+  "version": "2.2.1",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/Layout/AppLayout/components/Sidebar/useSidebarNavigation.ts

@@ -122,22 +122,71 @@ export const useSidebarNavigation = (
   useEffect(() => {
     const currentPathArray = window.location.pathname.split('/');
 
-    if (currentPathArray.length > 2) {
-      currentPathArray.splice(0, 2);
-      currentPathArray.pop();
+    if (currentPathArray.length > 3) {
+      currentPathArray.splice(0, 3); // Remove ['', 'aupulse', 'common-workspace']
+      // Remove the pop() - we need all remaining segments for navigation
     }
 
-    const activeMenu = getActiveMenu({
-      menu: currentMenuState.menu,
-      pathArray: currentPathArray,
-      previousMenuState: currentMenuState,
-    });
-
-    setCurrentMenuState({
-      title: activeMenu?.title,
-      path: activeMenu.path,
-      menu: activeMenu?.menu,
-    });
+    // Build history stack while traversing to the active menu
+    const historyStack: MenuState[] = [];
+    let currentMenu = menu;
+    let currentPath = '';
+    let currentTitle: string | null = null;
+
+    // Traverse the path array to build history and find final menu state
+    for (let i = 0; i < currentPathArray.length; i++) {
+      const pathSegment = `/${currentPathArray[i]}`;
+      const item = currentMenu.find(
+        (item: SideMenuItemProps) => item.path === pathSegment,
+      );
+
+      if (item && item.menu) {
+        if (i < currentPathArray.length - 1) {
+          // This is an intermediate level - add current level to history before moving deeper
+          historyStack.push({
+            title: currentTitle,
+            path: currentPath || null,
+            menu: currentMenu,
+          });
+        }
+
+        // Move to next level
+        currentMenu = item.menu;
+        currentPath += item.path;
+        currentTitle = item.name;
+      } else {
+        break;
+      }
+    }
+
+    // Set the final menu state if we found nested menus
+    let finalMenuState: MenuState = currentMenuState;
+    if (currentPath) {
+      finalMenuState = {
+        title: currentTitle,
+        path: currentPath,
+        menu: currentMenu,
+      };
+    }
+
+    // If we have history, it means we're in a nested menu
+    if (historyStack.length > 0) {
+      setHistory(historyStack);
+      setCurrentMenuState(finalMenuState);
+    } else {
+      // Fallback to the original logic for non-nested menus
+      const activeMenu = getActiveMenu({
+        menu: currentMenuState.menu,
+        pathArray: currentPathArray,
+        previousMenuState: currentMenuState,
+      });
+
+      setCurrentMenuState({
+        title: activeMenu?.title,
+        path: activeMenu.path,
+        menu: activeMenu?.menu,
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);