@campxdev/react-blueprint 2.3.9 → 2.3.11

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

@@ -1,5 +1,7 @@
 import React from 'react';
 interface AppBarProps {
+    /** Left section component*/
+    leftSection?: React.ReactNode;
     /** Right section component (actions, profile, etc.) */
     rightSection?: React.ReactNode;
     /** Center section component (workspace switcher, etc.) */

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

@@ -1,8 +1,15 @@
 import React from 'react';
+import { UserProfilePopupProps } from '../UserProfilePopup';
 import { SideMenuItemProps } from './interfaces';
 interface SidebarProps {
+    /** Menu items for navigation */
     menu: SideMenuItemProps[];
-    width?: number;
+    /**User profile Params */
+    userProfileParams: UserProfilePopupProps;
+    /** Whether the sidebar is collapsed */
+    collapsed: boolean;
+    /** Function to toggle sidebar collapse state */
+    setCollapsed: any;
 }
 export declare const Sidebar: React.FC<SidebarProps>;
 export {};

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

@@ -41,6 +41,7 @@ export interface MenuItemProps {
     internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
     onClose?: () => void;
     collapsed?: boolean;
+    setCollapsed?: any;
 }
 export interface SubMenuItemProps {
     index: number;
@@ -54,4 +55,5 @@ export interface MenuBarProps {
     previousMenuClickHandler: () => void;
     onClose?: () => void;
     collapsed?: boolean;
+    setCollapsed?: any;
 }

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

@@ -2,8 +2,8 @@ import React from 'react';
 export interface UserProfilePopupProps {
     /** User's full name */
     userFullName: string;
-    /** User's designation/role */
-    designation?: string;
+    /** User's email */
+    email?: string;
     /** Profile dropdown actions (custom menu items) */
     profileActions?: React.ReactNode[];
     /** Logout click handler */

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

@@ -19,6 +19,8 @@ export interface AppLayoutProps {
     /**User profile parameters */
     userProfileParams: UserProfilePopupProps;
     /** AppBar customization - Primary approach */
+    leftSection?: ReactNode;
+    /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
     /** AppBar center section customization */
     centerSection?: ReactNode;

package/dist/index.d.ts

@@ -959,8 +959,8 @@ interface SubMenuData {
 interface UserProfilePopupProps {
     /** User's full name */
     userFullName: string;
-    /** User's designation/role */
-    designation?: string;
+    /** User's email */
+    email?: string;
     /** Profile dropdown actions (custom menu items) */
     profileActions?: react__default.ReactNode[];
     /** Logout click handler */
@@ -1016,6 +1016,8 @@ interface AppLayoutProps {
     /**User profile parameters */
     userProfileParams: UserProfilePopupProps;
     /** AppBar customization - Primary approach */
+    leftSection?: ReactNode;
+    /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
     /** AppBar center section customization */
     centerSection?: ReactNode;

package/package.json

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

package/src/components/DataDisplay/SidePanel/styles.tsx

@@ -2,7 +2,7 @@ import { Box, Stack, styled, Typography } from '@mui/material';
 
 export const StyledSidePanelContainer = styled(Stack)(({ theme }) => ({
   width: '300px',
-  backgroundColor: theme.palette.surface.paperBackground,
+  backgroundColor: '#F7F8FA',
   padding: '12px',
   borderRadius: '8px',
   gap: '12px',

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

@@ -3,12 +3,13 @@ import { motion } from 'framer-motion';
 import React, { useState } from 'react';
 import { AppBar } from './components/AppBar';
 import { FloatingHelpDocs } from './components/FloatingHelpDocs';
-import { PersistentSidebar } from './components/PersistentSidebar';
+import { Sidebar } from './components/Sidebar/Sidebar';
 import { AppLayoutProps } from './types';
 
 export const AppLayout: React.FC<AppLayoutProps> = ({
   children,
   menu,
+  leftSection,
   rightSection,
   centerSection,
   mainContainerSx = {},
@@ -49,10 +50,10 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   return (
     <AppLayoutContainer>
       {/* Persistent Sidebar */}
-      <PersistentSidebar
+      <Sidebar
         menu={menu}
         collapsed={collapsed}
-        onToggle={toggleSidebar}
+        setCollapsed={setCollapsed}
         userProfileParams={userProfileParams}
       />
 
@@ -70,6 +71,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
       >
         {/* AppBar - Top of main content area */}
         <AppBar
+          leftSection={leftSection}
           rightSection={rightSection}
           centerSection={centerSection}
           hideHamburger={!isSmallScreen}

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

@@ -1,4 +1,4 @@
-import { IconButton, Stack, styled, useTheme } from '@mui/material';
+import { Box, IconButton, Stack, styled, useTheme } from '@mui/material';
 import React from 'react';
 import { CampxIconV2 } from '../../../Assets/Icons/IconComponents/CampxIconV2';
 import { HamburgerMenuIcon } from '../../../Assets/Icons/IconComponents/HamburgerMenuIcon';
@@ -30,6 +30,8 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
 }));
 
 interface AppBarProps {
+  /** Left section component*/
+  leftSection?: React.ReactNode;
   /** Right section component (actions, profile, etc.) */
   rightSection?: React.ReactNode;
   /** Center section component (workspace switcher, etc.) */
@@ -45,6 +47,7 @@ interface AppBarProps {
 }
 
 export const AppBar: React.FC<AppBarProps> = ({
+  leftSection,
   rightSection,
   centerSection,
   className = 'appHeaderV2',
@@ -59,11 +62,13 @@ export const AppBar: React.FC<AppBarProps> = ({
       className={className}
       sx={{
         ...sx,
-        justifyContent: hideHamburger ? 'flex-end' : 'space-between',
+        justifyContent: 'space-between',
       }}
     >
       {/* Left section - Hamburger + Logo (only show if not hidden) */}
-      {!hideHamburger && (
+      {hideHamburger ? (
+        <Box sx={{ paddingX: '12px' }}>{leftSection}</Box>
+      ) : (
         <Stack gap={'4px'} direction={'row'} alignItems={'center'}>
           <IconButton
             onClick={onToggleSidebar}

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

@@ -24,9 +24,12 @@ export const MenuBar: React.FC<MenuBarProps> = ({
   previousMenuClickHandler,
   onClose,
   collapsed,
+  setCollapsed,
 }) => {
   return (
-    <MenuBarContainer>
+    <MenuBarContainer
+      sx={{ ':hover': { cursor: collapsed ? 'e-resize' : 'default' } }}
+    >
       {currentMenuState.title && (
         <MenuHeaderContainer
           direction="row"
@@ -57,6 +60,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({
               internalMenuClickHandler={internalMenuClickHandler}
               onClose={onClose}
               collapsed={collapsed}
+              setCollapsed={setCollapsed}
             />
           ))}
         </motion.div>

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

@@ -22,6 +22,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   internalMenuClickHandler,
   onClose,
   collapsed,
+  setCollapsed,
 }) => {
   const { name, path, icon, menu: internalMenu, subMenu } = menuItem;
   const newPath = currentMenuPath ? `${currentMenuPath}${path}` : path;
@@ -30,9 +31,13 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   const match = useMatch({ path: resolved.pathname, end: false });
   const [expanded, setExpanded] = useState(!!match);
 
-  const handleSubMenuToggle = () => setExpanded(!expanded);
+  const handleSubMenuToggle = () => {
+    setCollapsed(false);
+    setExpanded(!expanded);
+  };
 
   const handleInternalMenuClick = () => {
+    setCollapsed(false);
     internalMenuClickHandler({
       menuTitle: name,
       menuPath: newPath,

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

@@ -1,62 +1,182 @@
-import { styled } from '@mui/material';
-import { motion } from 'framer-motion';
-import React from 'react';
-
+import {
+  Box,
+  IconButton,
+  Stack,
+  styled,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useState } from 'react';
+import { CampxFullLogoIconV2 } from '../../../../Assets/Icons/IconComponents/CampxFullLogoIconV2';
+import { CampxIconV2 } from '../../../../Assets/Icons/IconComponents/CampxIconV2';
+import { Icons } from '../../../../export';
+import { UserProfilePopup, UserProfilePopupProps } from '../UserProfilePopup';
 import { SideMenuItemProps } from './interfaces';
 import { MenuBar } from './MenuBar';
-import { SidebarContainer } from './styles';
 import { useSidebarNavigation } from './useSidebarNavigation';
 
 interface SidebarProps {
+  /** Menu items for navigation */
   menu: SideMenuItemProps[];
-  width?: number;
+  /**User profile Params */
+  userProfileParams: UserProfilePopupProps;
+  /** Whether the sidebar is collapsed */
+  collapsed: boolean;
+  /** Function to toggle sidebar collapse state */
+  setCollapsed: any;
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ menu, width = 250 }) => {
-  const {
-    menuPosition,
-    currentMenuState,
-    internalMenuClickHandler,
-    previousMenuClickHandler,
-  } = useSidebarNavigation(menu);
+export const Sidebar: React.FC<SidebarProps> = ({
+  menu,
+  userProfileParams,
+  collapsed,
+  setCollapsed,
+}) => {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+  const [hovered, setHovered] = useState(false);
+  // Use the navigation hook
+  const navigation = useSidebarNavigation(menu);
+
+  const onToggle = () => {
+    setCollapsed(!collapsed);
+  };
 
   return (
-    <SidebarWrapper width={width}>
-      <SidebarContainer spacing="12px" direction="column">
-        <motion.div
-          key={`sidebar-${currentMenuState.title || 'main'}`}
-          initial={{ x: menuPosition }}
-          animate={{ x: 0 }}
-          transition={{
-            duration: 0.3,
-            ease: menuPosition ? 'circOut' : 'circIn',
-          }}
-          style={{ height: '100%' }}
-        >
-          <MenuBar
-            currentMenuState={currentMenuState}
-            menuPosition={menuPosition}
-            internalMenuClickHandler={internalMenuClickHandler}
-            previousMenuClickHandler={previousMenuClickHandler}
+    <>
+      {/* Mobile overlay backdrop */}
+      <AnimatePresence>
+        {!collapsed && isSmallScreen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              zIndex: 1299,
+            }}
+            onClick={onToggle}
           />
-        </motion.div>
-      </SidebarContainer>
-    </SidebarWrapper>
+        )}
+      </AnimatePresence>
+
+      {/* Persistent Sidebar */}
+      <motion.div
+        animate={{
+          width: collapsed ? '64px' : '250px',
+          x: isSmallScreen && collapsed ? '-100%' : '0%',
+        }}
+        transition={{ duration: 0.3, ease: [0.32, 0.72, 0, 1] }}
+        style={{
+          position: isSmallScreen ? 'fixed' : 'relative',
+          zIndex: isSmallScreen ? 1300 : 1,
+          height: '100vh',
+          flexShrink: 0,
+        }}
+      >
+        <SidebarContainer>
+          {/* Sidebar Header */}
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            sx={{
+              height: '64px',
+              padding: collapsed ? '0' : '0 16px',
+              [theme.breakpoints.down('md')]: {
+                height: '54px',
+              },
+            }}
+          >
+            {/* Logo - Show icon when collapsed, full logo when expanded */}
+            {collapsed ? (
+              <IconButton
+                onClick={() => {
+                  setHovered(false);
+                  onToggle();
+                }}
+                onMouseEnter={() => setHovered(true)}
+                onMouseLeave={() => setHovered(false)}
+                sx={{
+                  width: '64px',
+                  height: '64px',
+                  borderRadius: 0,
+                  [theme.breakpoints.down('md')]: {
+                    height: '54px',
+                    width: '54px',
+                  },
+                  ':hover': { cursor: 'e-resize' },
+                }}
+              >
+                {hovered ? <Icons.RightIcon size={24} /> : <CampxIconV2 />}
+              </IconButton>
+            ) : (
+              <>
+                <CampxFullLogoIconV2 />
+                <IconButton
+                  onClick={onToggle}
+                  sx={{
+                    ':hover': { cursor: 'e-resize' },
+                  }}
+                >
+                  <Icons.LeftIcon size={20} />
+                </IconButton>
+              </>
+            )}
+          </Stack>
+
+          {/* Menu Content */}
+          <motion.div
+            key={`sidebar-${navigation.currentMenuState.title || 'main'}`}
+            initial={{ x: navigation.menuPosition }}
+            animate={{ x: 0 }}
+            transition={{
+              duration: 0.3,
+              ease: navigation.menuPosition ? 'circOut' : 'circIn',
+            }}
+            style={{
+              height: `calc(100% - 116px)`,
+              width: '100%',
+            }}
+            onClick={() => setCollapsed(false)}
+          >
+            <MenuBar
+              currentMenuState={navigation.currentMenuState}
+              menuPosition={navigation.menuPosition}
+              internalMenuClickHandler={navigation.internalMenuClickHandler}
+              previousMenuClickHandler={navigation.previousMenuClickHandler}
+              onClose={isSmallScreen ? onToggle : undefined}
+              collapsed={collapsed}
+              setCollapsed={setCollapsed}
+            />
+          </motion.div>
+          <Box sx={{ position: 'fixed', bottom: 0, left: 0 }}>
+            <UserProfilePopup
+              userFullName={userProfileParams?.userFullName}
+              email={userProfileParams?.email}
+              onLogout={userProfileParams?.onLogout}
+              onAccountClick={userProfileParams?.onAccountClick}
+              profileActions={userProfileParams?.profileActions}
+              collapsed={collapsed}
+            />
+          </Box>
+        </SidebarContainer>
+      </motion.div>
+    </>
   );
 };
 
-const SidebarWrapper = styled('div')<{ width: number }>(({ theme, width }) => ({
-  width: `${width}px`,
+const SidebarContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
   height: '100%',
-  flexShrink: 0, // Prevent sidebar from shrinking
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: '8px',
-  border: `1px solid ${theme.palette.divider}`,
-  overflow: 'hidden',
-  display: 'flex',
+  backgroundColor: theme.palette.surface.paperBackground,
   flexDirection: 'column',
-
-  [theme.breakpoints.down('md')]: {
-    display: 'none',
-  },
+  overflow: 'hidden',
+  borderRight: `1px solid ${theme.palette.divider}`,
 }));

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

@@ -49,6 +49,7 @@ export interface MenuItemProps {
   internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
   onClose?: () => void; // Optional callback to close the drawer
   collapsed?: boolean; // Whether sidebar is collapsed
+  setCollapsed?: any;
 }
 
 export interface SubMenuItemProps {
@@ -64,4 +65,5 @@ export interface MenuBarProps {
   previousMenuClickHandler: () => void;
   onClose?: () => void; // Optional callback to close the drawer
   collapsed?: boolean; // Whether sidebar is collapsed
+  setCollapsed?: any;
 }

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

@@ -7,8 +7,8 @@ import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuI
 export interface UserProfilePopupProps {
   /** User's full name */
   userFullName: string;
-  /** User's designation/role */
-  designation?: string;
+  /** User's email */
+  email?: string;
   /** Profile dropdown actions (custom menu items) */
   profileActions?: React.ReactNode[];
   /** Logout click handler */
@@ -56,7 +56,7 @@ const getStartingLetters = (text: string) => {
 export const UserProfilePopup: React.FC<UserProfilePopupProps> = ({
   collapsed,
   userFullName,
-  designation = '',
+  email = '',
   profileActions = [],
   onLogout,
   profileUrl,
@@ -165,7 +165,7 @@ export const UserProfilePopup: React.FC<UserProfilePopupProps> = ({
                   </Avatar>
                   <Stack>
                     <Typography variant="subtitle3">{userFullName}</Typography>
-                    <Typography variant="caption">{designation}</Typography>
+                    <Typography variant="caption">{email}</Typography>
                   </Stack>
                 </Stack>
                 <Icons.NavigationIcon />

package/src/components/Layout/AppLayout/types.ts

@@ -24,6 +24,9 @@ export interface AppLayoutProps {
   /**User profile parameters */
   userProfileParams: UserProfilePopupProps;
 
+  /** AppBar customization - Primary approach */
+  leftSection?: ReactNode;
+
   /** AppBar customization - Primary approach */
   rightSection?: ReactNode;
 

package/src/themes/commonTheme.ts

@@ -414,6 +414,7 @@ export const getCommonTheme = (mode: Theme) => {
             backgroundColor: ColorTokens.surface.paperBackground,
             // boxShadow: `0px 2px 5px ${ColorTokens.secondary.main}`,
             border: `1px solid ${ColorTokens.secondary.main}`,
+            color: ColorTokens.text.secondary,
           },
           arrow: {
             color: ColorTokens.surface.paperBackground,

package/dist/cjs/types/src/components/Layout/AppLayout/components/PersistentSidebar.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { SideMenuItemProps } from './Sidebar/interfaces';
-import { UserProfilePopupProps } from './UserProfilePopup';
-interface PersistentSidebarProps {
-    /** Menu items for navigation */
-    menu: SideMenuItemProps[];
-    userProfileParams: UserProfilePopupProps;
-    /** Whether the sidebar is collapsed */
-    collapsed: boolean;
-    /** Function to toggle sidebar collapse state */
-    onToggle: () => void;
-}
-export declare const PersistentSidebar: React.FC<PersistentSidebarProps>;
-export {};

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { SideMenuItemProps } from './Sidebar/interfaces';
-import { UserProfilePopupProps } from './UserProfilePopup';
-interface PersistentSidebarProps {
-    /** Menu items for navigation */
-    menu: SideMenuItemProps[];
-    userProfileParams: UserProfilePopupProps;
-    /** Whether the sidebar is collapsed */
-    collapsed: boolean;
-    /** Function to toggle sidebar collapse state */
-    onToggle: () => void;
-}
-export declare const PersistentSidebar: React.FC<PersistentSidebarProps>;
-export {};