@campxdev/react-blueprint 2.3.8 → 2.3.9

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

@@ -1,16 +1,17 @@
 import React from 'react';
-import { SideMenuItemProps } from './Sidebar/interfaces';
 interface AppBarProps {
     /** Right section component (actions, profile, etc.) */
     rightSection?: React.ReactNode;
     /** Center section component (workspace switcher, etc.) */
     centerSection?: React.ReactNode;
-    /** Menu items for mobile drawer */
-    menu?: SideMenuItemProps[];
     /** Custom className for the AppBar */
     className?: string;
     /** Custom styles for the AppBar */
     sx?: any;
+    /** Hide hamburger menu (for persistent sidebar mode) */
+    hideHamburger?: boolean;
+    /** Callback to toggle sidebar (for persistent sidebar mode on mobile) */
+    onToggleSidebar?: () => void;
 }
 export declare const AppBar: React.FC<AppBarProps>;
 export {};

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

@@ -0,0 +1,14 @@
+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/Sidebar/interfaces.d.ts

@@ -40,6 +40,7 @@ export interface MenuItemProps {
     currentMenuPath: string | null;
     internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
     onClose?: () => void;
+    collapsed?: boolean;
 }
 export interface SubMenuItemProps {
     index: number;
@@ -52,4 +53,5 @@ export interface MenuBarProps {
     internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
     previousMenuClickHandler: () => void;
     onClose?: () => void;
+    collapsed?: boolean;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface UserProfilePopupProps {
+export interface UserProfilePopupProps {
     /** User's full name */
     userFullName: string;
     /** User's designation/role */
@@ -18,6 +18,8 @@ interface UserProfilePopupProps {
     onActiveDevicesClick?: () => void;
     /** Account section click handler */
     onAccountClick?: () => void;
+    /**Persistant Side bar collapsed - boolean */
+    collapsed?: boolean;
 }
 /**
  * Independent User Profile popup component for AppLayout right section
@@ -38,4 +40,3 @@ interface UserProfilePopupProps {
  * />
  */
 export declare const UserProfilePopup: React.FC<UserProfilePopupProps>;
-export {};

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { SideMenuItemProps } from './components/Sidebar/interfaces';
+import { UserProfilePopupProps } from './components/UserProfilePopup';
 export interface HelpDocsAction {
     name: string;
     onClick: () => void;
@@ -15,6 +16,8 @@ export interface AppLayoutProps {
     children: ReactNode;
     /** Navigation menu items */
     menu: SideMenuItemProps[];
+    /**User profile parameters */
+    userProfileParams: UserProfilePopupProps;
     /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
     /** AppBar center section customization */
@@ -23,4 +26,8 @@ export interface AppLayoutProps {
     mainContainerSx?: any;
     /** Help documentation configuration for route-based contextual help */
     helpDocsConfig?: HelpDocsConfig;
+    /**
+     * Initial collapsed state for persistent sidebar
+     */
+    initialCollapsed?: boolean;
 }

package/dist/index.d.ts

@@ -956,6 +956,48 @@ interface SubMenuData {
     permissionKey?: string;
 }
 
+interface UserProfilePopupProps {
+    /** User's full name */
+    userFullName: string;
+    /** User's designation/role */
+    designation?: string;
+    /** Profile dropdown actions (custom menu items) */
+    profileActions?: react__default.ReactNode[];
+    /** Logout click handler */
+    onLogout?: () => void;
+    /** Profile image URL */
+    profileUrl?: string;
+    /** Custom styles for the avatar */
+    avatarSx?: any;
+    /** Whether to show active devices option */
+    showActiveDevices?: boolean;
+    /** Active devices click handler */
+    onActiveDevicesClick?: () => void;
+    /** Account section click handler */
+    onAccountClick?: () => void;
+    /**Persistant Side bar collapsed - boolean */
+    collapsed?: boolean;
+}
+/**
+ * Independent User Profile popup component for AppLayout right section
+ * No longer depends on UserBox - contains its own implementation
+ * Provides clean, flexible props interface
+ *
+ * @example
+ * <UserProfilePopup
+ *   userFullName="John Doe"
+ *   designation="Administrator"
+ *   profileActions={[
+ *     <SwitchInstitutionPopup key="switch" />,
+ *     <DropdownMenuItem key="settings" label="Settings" onClick={() => {}} />
+ *   ]}
+ *   onLogout={handleLogout}
+ *   showActiveDevices={true}
+ *   onActiveDevicesClick={() => console.log('Active devices')}
+ * />
+ */
+declare const UserProfilePopup: react__default.FC<UserProfilePopupProps>;
+
 interface HelpDocsAction {
     name: string;
     onClick: () => void;
@@ -971,6 +1013,8 @@ interface AppLayoutProps {
     children: ReactNode;
     /** Navigation menu items */
     menu: SideMenuItemProps$1[];
+    /**User profile parameters */
+    userProfileParams: UserProfilePopupProps;
     /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
     /** AppBar center section customization */
@@ -979,6 +1023,10 @@ interface AppLayoutProps {
     mainContainerSx?: any;
     /** Help documentation configuration for route-based contextual help */
     helpDocsConfig?: HelpDocsConfig;
+    /**
+     * Initial collapsed state for persistent sidebar
+     */
+    initialCollapsed?: boolean;
 }
 
 declare const AppLayout: react__default.FC<AppLayoutProps>;
@@ -1046,46 +1094,6 @@ interface SwitchInstitutionPopupProps {
  */
 declare const SwitchInstitutionPopup: react__default.FC<SwitchInstitutionPopupProps>;
 
-interface UserProfilePopupProps {
-    /** User's full name */
-    userFullName: string;
-    /** User's designation/role */
-    designation?: string;
-    /** Profile dropdown actions (custom menu items) */
-    profileActions?: react__default.ReactNode[];
-    /** Logout click handler */
-    onLogout?: () => void;
-    /** Profile image URL */
-    profileUrl?: string;
-    /** Custom styles for the avatar */
-    avatarSx?: any;
-    /** Whether to show active devices option */
-    showActiveDevices?: boolean;
-    /** Active devices click handler */
-    onActiveDevicesClick?: () => void;
-    /** Account section click handler */
-    onAccountClick?: () => void;
-}
-/**
- * Independent User Profile popup component for AppLayout right section
- * No longer depends on UserBox - contains its own implementation
- * Provides clean, flexible props interface
- *
- * @example
- * <UserProfilePopup
- *   userFullName="John Doe"
- *   designation="Administrator"
- *   profileActions={[
- *     <SwitchInstitutionPopup key="switch" />,
- *     <DropdownMenuItem key="settings" label="Settings" onClick={() => {}} />
- *   ]}
- *   onLogout={handleLogout}
- *   showActiveDevices={true}
- *   onActiveDevicesClick={() => console.log('Active devices')}
- * />
- */
-declare const UserProfilePopup: react__default.FC<UserProfilePopupProps>;
-
 type AppHeaderProps = {
     actions?: ReactNode[];
     profileActions?: ReactNode[];

package/package.json

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

package/src/App.tsx

@@ -6,13 +6,8 @@ import {
 } from 'react-router-dom';
 import './App.css';
 
-import { Stack } from '@mui/material';
 import { Icons } from './components/export';
-import {
-  AppLayout,
-  SwitchInstitutionPopup,
-  UserProfilePopup,
-} from './components/Layout/AppLayout';
+import { AppLayout } from './components/Layout/AppLayout';
 
 // Sample Pages
 import { Dashboard } from './pages/Dashboard';
@@ -269,39 +264,16 @@ function App() {
     // In a real app, you would handle logout logic here
   };
 
+  const userProfileParams = {
+    userFullName: 'User',
+    designation: 'Admin',
+    onLogout: () => {},
+    onAccountClick: () => {},
+    profileActions: [],
+  };
   return (
     <Router>
-      <AppLayout
-        menu={sampleMenu}
-        rightSection={
-          <Stack direction="row" alignItems="center" gap={1}>
-            <Icons.AdminIcon size={24} />
-            <UserProfilePopup
-              userFullName="John Doe"
-              designation="Administrator"
-              onLogout={handleLogout}
-              showActiveDevices={true}
-              profileActions={[
-                <SwitchInstitutionPopup
-                  key="switch-institution"
-                  institutionsData={[
-                    {
-                      name: 'Demo University',
-                      code: 'demo',
-                      imageSquare: { url: '' },
-                    },
-                    {
-                      name: 'Test College',
-                      code: 'test',
-                      imageSquare: { url: '' },
-                    },
-                  ]}
-                />,
-              ]}
-            />
-          </Stack>
-        }
-      >
+      <AppLayout menu={sampleMenu} userProfileParams={userProfileParams}>
         <Routes>
           <Route path="/" element={<Navigate to="/dashboard" replace />} />
           <Route path="/dashboard" element={<Dashboard />} />

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

@@ -1,7 +1,9 @@
-import { Box, Stack, styled, useTheme } from '@mui/material';
-import React from 'react';
+import { Box, Stack, styled, useMediaQuery, useTheme } from '@mui/material';
+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 { AppLayoutProps } from './types';
 
 export const AppLayout: React.FC<AppLayoutProps> = ({
@@ -11,8 +13,14 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   centerSection,
   mainContainerSx = {},
   helpDocsConfig,
+  initialCollapsed,
+  userProfileParams,
 }) => {
   const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+
+  // State for persistent sidebar
+  const [collapsed, setCollapsed] = useState(isSmallScreen ?? initialCollapsed);
 
   // Get help docs actions for current route
   const getCurrentRouteHelpActions = () => {
@@ -28,41 +36,74 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
 
   const helpDocsActions = getCurrentRouteHelpActions();
 
+  const toggleSidebar = () => {
+    setCollapsed(!collapsed);
+  };
+
+  // Calculate main content width for persistent sidebar
+  const getMainWidth = () => {
+    if (isSmallScreen) return '100%';
+    return collapsed ? 'calc(100% - 64px)' : 'calc(100% - 250px)';
+  };
+
   return (
     <AppLayoutContainer>
-      {/* AppBar - Full width at the top */}
-      <AppBar
-        rightSection={rightSection}
-        centerSection={centerSection}
+      {/* Persistent Sidebar */}
+      <PersistentSidebar
         menu={menu}
+        collapsed={collapsed}
+        onToggle={toggleSidebar}
+        userProfileParams={userProfileParams}
       />
 
-      {/* Main Content - Single column, centered with max-width */}
-      <MainContent
-        sx={{
-          ...mainContainerSx,
+      {/* Main Content Area with dynamic width */}
+      <motion.div
+        animate={{
+          width: getMainWidth(),
+        }}
+        transition={{ duration: 0.3, ease: [0.32, 0.72, 0, 1] }}
+        style={{
+          flexDirection: 'column',
+          height: '100vh',
+          overflow: 'hidden',
         }}
       >
-        {children}
-      </MainContent>
+        {/* AppBar - Top of main content area */}
+        <AppBar
+          rightSection={rightSection}
+          centerSection={centerSection}
+          hideHamburger={!isSmallScreen}
+          onToggleSidebar={toggleSidebar}
+        />
 
-      {/* Floating Help Docs - Route-aware contextual help */}
-      {helpDocsActions.length > 0 && (
-        <FloatingHelpDocs actions={helpDocsActions} />
-      )}
+        {/* Main Content */}
+        <MainContent
+          sx={{
+            ...mainContainerSx,
+            height: `calc(100vh - 90px)`,
+            overflow: 'scroll',
+          }}
+        >
+          {children}
+        </MainContent>
+
+        {/* Floating Help Docs - Route-aware contextual help */}
+        {helpDocsActions.length > 0 && (
+          <FloatingHelpDocs actions={helpDocsActions} />
+        )}
+      </motion.div>
     </AppLayoutContainer>
   );
 };
 
 const AppLayoutContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
-  flexDirection: 'column',
-  backgroundColor: theme.palette.surface.defaultBackground,
+  flexDirection: 'row',
+  backgroundColor: theme.palette.surface.paperBackground,
   height: '100vh',
-  overflow: 'scroll',
+  overflow: 'hidden',
 }));
 
 const MainContent = styled(Box)(({ theme }: { theme?: any }) => ({
-  borderRadius: '8px',
   flex: 1,
   maxWidth: '1440px', // Max width for content
   width: '100%',

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

@@ -1,16 +1,7 @@
-import {
-  IconButton,
-  Stack,
-  styled,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import React, { useState } from 'react';
-import { CampxFullLogoIconV2 } from '../../../Assets/Icons/IconComponents/CampxFullLogoIconV2';
+import { 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';
-import { SideDrawer } from './SideDrawer';
-import { SideMenuItemProps } from './Sidebar/interfaces';
 
 const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
   display: 'flex',
@@ -19,12 +10,12 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
   justifyContent: 'space-between',
   position: 'relative', // Add relative positioning for absolute center positioning
   width: '100%',
-  height: '64px',
-  minHeight: '64px',
+  height: '54px',
+  minHeight: '54px',
   backgroundColor: theme.palette.surface.paperBackground,
   padding: '0 24px 0 0',
   flexShrink: 0, // Prevent AppBar from shrinking
-
+  borderBottom: `1px solid ${theme.palette.divider}`,
   [theme.breakpoints.down('md')]: {
     height: '54px',
     minHeight: '54px',
@@ -43,49 +34,51 @@ interface AppBarProps {
   rightSection?: React.ReactNode;
   /** Center section component (workspace switcher, etc.) */
   centerSection?: React.ReactNode;
-  /** Menu items for mobile drawer */
-  menu?: SideMenuItemProps[];
   /** Custom className for the AppBar */
   className?: string;
   /** Custom styles for the AppBar */
   sx?: any;
+  /** Hide hamburger menu (for persistent sidebar mode) */
+  hideHamburger?: boolean;
+  /** Callback to toggle sidebar (for persistent sidebar mode on mobile) */
+  onToggleSidebar?: () => void;
 }
 
 export const AppBar: React.FC<AppBarProps> = ({
   rightSection,
   centerSection,
-  menu = [],
   className = 'appHeaderV2',
   sx = {},
+  hideHamburger = false,
+  onToggleSidebar = () => {},
 }) => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  const toggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
 
   return (
-    <AppBarContainer className={className} sx={sx}>
-      {/* Left section - Hamburger + Logo */}
-      <Stack direction="row" alignItems="center" gap="12px" height="100%">
-        <IconButton
-          onClick={toggleDrawer}
-          sx={{
-            padding: '24px',
-            backgroundColor: theme.palette.secondary.light,
-            borderRadius: '0px',
-            [theme.breakpoints.down('md')]: {
-              padding: '20px',
-            },
-          }}
-        >
-          <HamburgerMenuIcon />
-        </IconButton>
-        {/* CampX Logo - Full logo on desktop, icon on mobile */}
-        {isMobile ? <CampxIconV2 /> : <CampxFullLogoIconV2 size={28} />}
-      </Stack>
+    <AppBarContainer
+      className={className}
+      sx={{
+        ...sx,
+        justifyContent: hideHamburger ? 'flex-end' : 'space-between',
+      }}
+    >
+      {/* Left section - Hamburger + Logo (only show if not hidden) */}
+      {!hideHamburger && (
+        <Stack gap={'4px'} direction={'row'} alignItems={'center'}>
+          <IconButton
+            onClick={onToggleSidebar}
+            sx={{
+              padding: '24px',
+              [theme.breakpoints.down('md')]: {
+                padding: '20px',
+              },
+            }}
+          >
+            <HamburgerMenuIcon />
+          </IconButton>
+          <CampxIconV2 />
+        </Stack>
+      )}
 
       {/* Center section - Custom content from props */}
       {centerSection && (
@@ -115,13 +108,6 @@ export const AppBar: React.FC<AppBarProps> = ({
           {rightSection}
         </Stack>
       )}
-
-      {/* Side Drawer */}
-      <SideDrawer
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-        menu={menu}
-      />
     </AppBarContainer>
   );
 };