@campxdev/react-blueprint 2.2.0 → 2.2.2

package/dist/esm/types/src/components/Layout/AppLayout/components/Sidebar/interfaces.d.ts

@@ -39,6 +39,7 @@ export interface MenuItemProps {
     menuItem: SideMenuItemProps;
     currentMenuPath: string | null;
     internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
+    onClose?: () => void;
 }
 export interface SubMenuItemProps {
     index: number;
@@ -50,4 +51,5 @@ export interface MenuBarProps {
     menuPosition: number;
     internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
     previousMenuClickHandler: () => void;
+    onClose?: () => void;
 }

package/package.json

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

package/src/components/DataDisplay/Card/Card.tsx

@@ -9,7 +9,8 @@ import {
 } from '@mui/material';
 import { TypographyVariant as Variant } from '@mui/material/styles';
 import { ReactNode } from 'react';
-import { DropDownIcon, DropdownMenu } from '../../export';
+import { DropDownIcon } from '../../Navigation/DropDownMenu/DropDownIcon';
+import { DropdownMenu } from '../../Navigation/DropDownMenu/DropDownMenu';
 import {
   StyledButton,
   StyledCardActions,

package/src/components/Layout/AppLayout/components/SideDrawer.tsx

@@ -95,6 +95,7 @@ export const SideDrawer: React.FC<SideDrawerProps> = ({
           menuPosition={navigation.menuPosition}
           internalMenuClickHandler={navigation.internalMenuClickHandler}
           previousMenuClickHandler={navigation.previousMenuClickHandler}
+          onClose={onClose}
         />
       </motion.div>
     </Drawer>

package/src/components/Layout/AppLayout/components/Sidebar/MenuBar.tsx

@@ -22,10 +22,10 @@ export const MenuBar: React.FC<MenuBarProps> = ({
   menuPosition,
   internalMenuClickHandler,
   previousMenuClickHandler,
+  onClose,
 }) => {
   return (
     <MenuBarContainer>
-      {/* Menu Header with Back Button */}
       {currentMenuState.title && (
         <MenuHeaderContainer
           direction="row"
@@ -39,7 +39,6 @@ export const MenuBar: React.FC<MenuBarProps> = ({
         </MenuHeaderContainer>
       )}
 
-      {/* Menu Items */}
       {currentMenuState.menu && currentMenuState.menu.length > 0 && (
         <motion.div
           variants={containerVariants}
@@ -53,6 +52,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({
               menuItem={item}
               currentMenuPath={currentMenuState.path}
               internalMenuClickHandler={internalMenuClickHandler}
+              onClose={onClose}
             />
           ))}
         </motion.div>

package/src/components/Layout/AppLayout/components/Sidebar/MenuItem.tsx

@@ -20,6 +20,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   menuItem,
   currentMenuPath,
   internalMenuClickHandler,
+  onClose,
 }) => {
   const { name, path, icon, menu: internalMenu, subMenu } = menuItem;
   const newPath = currentMenuPath ? `${currentMenuPath}${path}` : path;
@@ -38,6 +39,21 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     });
   };
 
+  // Smart drawer closing logic
+  const shouldCloseDrawer = (item: typeof menuItem) => {
+
+ 
+    
+    // For desktop, only close if it's a leaf node (no children)
+    return !item.menu && !item.subMenu;
+  };
+
+  const handleNavigationClick = () => {
+    if (shouldCloseDrawer(menuItem) && onClose) {
+      onClose();
+    }
+  };
+
   // Internal menu item (has nested menu)
   if (internalMenu && internalMenu.length > 0) {
     return (
@@ -110,6 +126,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                   index={subIndex}
                   subMenuItem={item}
                   subMenuButtonPath={newPath}
+                  onClose={onClose}
                 />
               ))}
             </SubMenuItemContainer>
@@ -128,7 +145,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
       transition={{ duration: 1 }}
     >
       <MenuItemContainer disablePadding>
-        <MenuLink to={newPath} match={match}>
+        <MenuLink to={newPath} match={match} onClick={handleNavigationClick}>
           <MenuItemButton>
             <MenuItemIcon>{icon}</MenuItemIcon>
             <Typography variant="button1">{name}</Typography>
@@ -144,16 +161,24 @@ const SubMenuItem: React.FC<{
   index: number;
   subMenuItem: { name: string; path: string };
   subMenuButtonPath: string;
-}> = ({ index, subMenuItem, subMenuButtonPath }) => {
+  onClose?: () => void;
+}> = ({ index, subMenuItem, subMenuButtonPath, onClose }) => {
   const { name, path } = subMenuItem;
   const newPath = `${subMenuButtonPath}${path}`;
 
   const resolved = useResolvedPath(newPath);
   const match = useMatch({ path: resolved.pathname, end: false });
 
+  const handleSubMenuNavigationClick = () => {
+    // Always close drawer for submenu items (they are leaf nodes)
+    if (onClose) {
+      onClose();
+    }
+  };
+
   return (
     <MenuItemContainer key={index} disablePadding>
-      <MenuLink to={newPath} match={match} sx={{ margin: '5px 8px 5px 16px' }}>
+      <MenuLink to={newPath} match={match} sx={{ margin: '5px 8px 5px 16px' }} onClick={handleSubMenuNavigationClick}>
         <MenuItemButton>
           <Typography variant="button1">{name}</Typography>
         </MenuItemButton>

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

@@ -47,6 +47,7 @@ export interface MenuItemProps {
   menuItem: SideMenuItemProps;
   currentMenuPath: string | null;
   internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
+  onClose?: () => void; // Optional callback to close the drawer
 }
 
 export interface SubMenuItemProps {
@@ -60,4 +61,5 @@ export interface MenuBarProps {
   menuPosition: number;
   internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
   previousMenuClickHandler: () => void;
+  onClose?: () => void; // Optional callback to close the drawer
 }

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

@@ -123,21 +123,70 @@ export const useSidebarNavigation = (
     const currentPathArray = window.location.pathname.split('/');
 
     if (currentPathArray.length > 3) {
-      currentPathArray.splice(0, 3);
-      currentPathArray.pop();
+      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
   }, []);