@campxdev/react-blueprint 2.2.1 → 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.1",
+  "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
 }