@campxdev/react-blueprint 2.3.8 → 2.3.9

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

@@ -0,0 +1,171 @@
+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 { MenuBar } from './Sidebar/MenuBar';
+import { SideMenuItemProps } from './Sidebar/interfaces';
+import { useSidebarNavigation } from './Sidebar/useSidebarNavigation';
+import { UserProfilePopup, 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 const PersistentSidebar: React.FC<PersistentSidebarProps> = ({
+  menu,
+  userProfileParams,
+  collapsed,
+  onToggle,
+}) => {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+  const [hovered, setHovered] = useState(false);
+  // Use the navigation hook
+  const navigation = useSidebarNavigation(menu);
+
+  return (
+    <>
+      {/* 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}
+          />
+        )}
+      </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}>
+                  <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%',
+            }}
+          >
+            <MenuBar
+              currentMenuState={navigation.currentMenuState}
+              menuPosition={navigation.menuPosition}
+              internalMenuClickHandler={navigation.internalMenuClickHandler}
+              previousMenuClickHandler={navigation.previousMenuClickHandler}
+              onClose={isSmallScreen ? onToggle : undefined}
+              collapsed={collapsed}
+            />
+          </motion.div>
+          <Box sx={{ position: 'fixed', bottom: 0, left: 0 }}>
+            <UserProfilePopup
+              userFullName={userProfileParams?.userFullName}
+              designation={userProfileParams?.designation}
+              onLogout={userProfileParams?.onLogout}
+              onAccountClick={userProfileParams?.onAccountClick}
+              profileActions={userProfileParams?.profileActions}
+              collapsed={collapsed}
+            />
+          </Box>
+        </SidebarContainer>
+      </motion.div>
+    </>
+  );
+};
+
+const SidebarContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
+  height: '100%',
+  backgroundColor: theme.palette.surface.paperBackground,
+  flexDirection: 'column',
+  overflow: 'hidden',
+  borderRight: `1px solid ${theme.palette.divider}`,
+}));

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

@@ -23,19 +23,22 @@ export const MenuBar: React.FC<MenuBarProps> = ({
   internalMenuClickHandler,
   previousMenuClickHandler,
   onClose,
+  collapsed,
 }) => {
   return (
     <MenuBarContainer>
       {currentMenuState.title && (
         <MenuHeaderContainer
           direction="row"
-          justifyContent="flex-start"
+          justifyContent={collapsed ? 'center' : 'flex-start'}
           onClick={previousMenuClickHandler}
         >
           <Icons.ArrowBackIcon size={20} />
-          <Typography variant="button1" sx={{ ml: 1 }}>
-            {currentMenuState.title}
-          </Typography>
+          {!collapsed && (
+            <Typography variant="button1" sx={{ ml: 1 }}>
+              {currentMenuState.title}
+            </Typography>
+          )}
         </MenuHeaderContainer>
       )}
 
@@ -53,6 +56,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({
               currentMenuPath={currentMenuState.path}
               internalMenuClickHandler={internalMenuClickHandler}
               onClose={onClose}
+              collapsed={collapsed}
             />
           ))}
         </motion.div>

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

@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Stack, Tooltip, Typography } from '@mui/material';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { useMatch, useResolvedPath } from 'react-router-dom';
@@ -21,6 +21,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   currentMenuPath,
   internalMenuClickHandler,
   onClose,
+  collapsed,
 }) => {
   const { name, path, icon, menu: internalMenu, subMenu } = menuItem;
   const newPath = currentMenuPath ? `${currentMenuPath}${path}` : path;
@@ -41,9 +42,6 @@ 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;
   };
@@ -56,16 +54,22 @@ export const MenuItem: React.FC<MenuItemProps> = ({
 
   // Internal menu item (has nested menu)
   if (internalMenu && internalMenu.length > 0) {
-    return (
-      <motion.div
-        key={`internal-${index}`}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1 }}
-      >
-        <MenuItemContainer disablePadding>
-          <SubMenuContainer match={!!match} onClick={handleInternalMenuClick}>
-            <MenuItemButton>
+    const content = (
+      <MenuItemContainer disablePadding>
+        <SubMenuContainer
+          match={!!match}
+          onClick={handleInternalMenuClick}
+          sx={{ width: collapsed ? 'max-content' : '100%' }}
+        >
+          <MenuItemButton
+            sx={{
+              justifyContent: collapsed ? 'center' : 'flex-start',
+              padding: collapsed ? '8px' : '5px 8px',
+            }}
+          >
+            {collapsed ? (
+              <MenuItemIcon sx={{ margin: 0 }}>{icon}</MenuItemIcon>
+            ) : (
               <Stack direction="row" alignItems="center" width="100%">
                 <Stack direction="row" alignItems="center" flex={1}>
                   <MenuItemIcon>{icon}</MenuItemIcon>
@@ -75,15 +79,12 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                   <Icons.RedoIcon size={18} />
                 </HoverIcon>
               </Stack>
-            </MenuItemButton>
-          </SubMenuContainer>
-        </MenuItemContainer>
-      </motion.div>
+            )}
+          </MenuItemButton>
+        </SubMenuContainer>
+      </MenuItemContainer>
     );
-  }
 
-  // Sub menu item (has expandable sub items)
-  if (subMenu && subMenu.length > 0) {
     return (
       <motion.div
         key={`submenu-${index}`}
@@ -91,28 +92,56 @@ export const MenuItem: React.FC<MenuItemProps> = ({
         animate={{ opacity: 1 }}
         transition={{ duration: 1 }}
       >
+        {collapsed ? (
+          <Tooltip title={name} placement="right">
+            {content}
+          </Tooltip>
+        ) : (
+          content
+        )}
+      </motion.div>
+    );
+  }
+
+  // Sub menu item (has expandable sub items)
+  if (subMenu && subMenu.length > 0) {
+    const content = (
+      <>
         <MenuItemContainer disablePadding>
-          <SubMenuContainer match={!!match} onClick={handleSubMenuToggle}>
-            <MenuItemButton>
-              <Stack
-                direction="row"
-                alignItems="center"
-                width="100%"
-                justifyContent="space-between"
-              >
-                <Stack direction="row" alignItems="center">
-                  <MenuItemIcon>{icon}</MenuItemIcon>
-                  <Typography variant="button1">{name}</Typography>
-                </Stack>
-                <Stack>
-                  {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
+          <SubMenuContainer
+            match={!!match}
+            onClick={handleSubMenuToggle}
+            sx={{ width: collapsed ? 'max-content' : '100%' }}
+          >
+            <MenuItemButton
+              sx={{
+                justifyContent: collapsed ? 'center' : 'flex-start',
+                padding: collapsed ? '8px' : '5px 8px',
+              }}
+            >
+              {collapsed ? (
+                <MenuItemIcon sx={{ margin: 0 }}>{icon}</MenuItemIcon>
+              ) : (
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  width="100%"
+                  justifyContent="space-between"
+                >
+                  <Stack direction="row" alignItems="center">
+                    <MenuItemIcon>{icon}</MenuItemIcon>
+                    <Typography variant="button1">{name}</Typography>
+                  </Stack>
+                  <Stack>
+                    {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
+                  </Stack>
                 </Stack>
-              </Stack>
+              )}
             </MenuItemButton>
           </SubMenuContainer>
         </MenuItemContainer>
 
-        {expanded && (
+        {expanded && !collapsed && (
           <motion.div
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: 'auto', opacity: 1 }}
@@ -132,11 +161,55 @@ export const MenuItem: React.FC<MenuItemProps> = ({
             </SubMenuItemContainer>
           </motion.div>
         )}
+      </>
+    );
+
+    return (
+      <motion.div
+        key={`submenu-${index}`}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1 }}
+      >
+        {collapsed ? (
+          <Tooltip title={name} placement="right">
+            <div>{content}</div>
+          </Tooltip>
+        ) : (
+          content
+        )}
       </motion.div>
     );
   }
 
   // Regular menu item (direct link)
+  const regularContent = (
+    <MenuItemContainer disablePadding>
+      <MenuLink
+        to={newPath}
+        match={match}
+        onClick={handleNavigationClick}
+        sx={{ width: collapsed ? 'max-content' : '100%' }}
+      >
+        <MenuItemButton
+          sx={{
+            justifyContent: collapsed ? 'center' : 'flex-start',
+            padding: collapsed ? '8px' : '5px 8px',
+          }}
+        >
+          {collapsed ? (
+            <MenuItemIcon sx={{ margin: 0 }}>{icon}</MenuItemIcon>
+          ) : (
+            <>
+              <MenuItemIcon>{icon}</MenuItemIcon>
+              <Typography variant="button1">{name}</Typography>
+            </>
+          )}
+        </MenuItemButton>
+      </MenuLink>
+    </MenuItemContainer>
+  );
+
   return (
     <motion.div
       key={`regular-${index}`}
@@ -144,14 +217,13 @@ export const MenuItem: React.FC<MenuItemProps> = ({
       animate={{ opacity: 1 }}
       transition={{ duration: 1 }}
     >
-      <MenuItemContainer disablePadding>
-        <MenuLink to={newPath} match={match} onClick={handleNavigationClick}>
-          <MenuItemButton>
-            <MenuItemIcon>{icon}</MenuItemIcon>
-            <Typography variant="button1">{name}</Typography>
-          </MenuItemButton>
-        </MenuLink>
-      </MenuItemContainer>
+      {collapsed ? (
+        <Tooltip title={name} placement="right">
+          {regularContent}
+        </Tooltip>
+      ) : (
+        regularContent
+      )}
     </motion.div>
   );
 };
@@ -178,7 +250,12 @@ const SubMenuItem: React.FC<{
 
   return (
     <MenuItemContainer key={index} disablePadding>
-      <MenuLink to={newPath} match={match} sx={{ margin: '5px 8px 5px 16px' }} onClick={handleSubMenuNavigationClick}>
+      <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

@@ -48,6 +48,7 @@ export interface MenuItemProps {
   currentMenuPath: string | null;
   internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
   onClose?: () => void; // Optional callback to close the drawer
+  collapsed?: boolean; // Whether sidebar is collapsed
 }
 
 export interface SubMenuItemProps {
@@ -62,4 +63,5 @@ export interface MenuBarProps {
   internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
   previousMenuClickHandler: () => void;
   onClose?: () => void; // Optional callback to close the drawer
+  collapsed?: boolean; // Whether sidebar is collapsed
 }

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

@@ -30,7 +30,6 @@ export const SidebarContainer = styled(Stack)(({ theme }) => ({
 export const MenuBarContainer = styled(Box)(({ theme }) => ({
   flex: 1,
   height: '100%',
-  borderRadius: '8px',
   backgroundColor: theme.palette.surface.paperBackground,
   overflowY: 'auto',
   overflowX: 'hidden',
@@ -64,7 +63,6 @@ export const MenuHeaderContainer = styled(Stack)(({ theme }) => ({
   padding: '12px 16px',
   backgroundColor: theme.palette.surface.grey,
   cursor: 'pointer',
-  borderRadius: '8px 8px 0px 0px',
 }));
 
 // Menu item containers

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

@@ -1,10 +1,10 @@
-import { Avatar, Stack, Typography, useTheme } from '@mui/material';
+import { Avatar, Box, Stack, Typography, useTheme } from '@mui/material';
 import React from 'react';
 import { Icons } from '../../../Assets/Icons/Icons';
 import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
 import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
 
-interface UserProfilePopupProps {
+export interface UserProfilePopupProps {
   /** User's full name */
   userFullName: string;
   /** User's designation/role */
@@ -23,6 +23,8 @@ interface UserProfilePopupProps {
   onActiveDevicesClick?: () => void;
   /** Account section click handler */
   onAccountClick?: () => void;
+  /**Persistant Side bar collapsed - boolean */
+  collapsed?: boolean;
 }
 
 const getStartingLetters = (text: string) => {
@@ -52,6 +54,7 @@ const getStartingLetters = (text: string) => {
  * />
  */
 export const UserProfilePopup: React.FC<UserProfilePopupProps> = ({
+  collapsed,
   userFullName,
   designation = '',
   profileActions = [],
@@ -89,19 +92,46 @@ export const UserProfilePopup: React.FC<UserProfilePopupProps> = ({
   return (
     <DropdownMenu
       anchor={({ open }) => (
-        <Avatar
-          src={profileUrl ?? ''}
-          onClick={open}
+        <Box
           sx={{
-            cursor: 'pointer',
-            width: 40,
-            height: 40,
-            fontSize: '14px',
-            ...avatarSx,
+            display: 'flex',
+            justifyContent: collapsed ? 'center' : 'space-between',
+            borderTop: `1px solid ${theme.palette.border.primary}`,
+            padding: 1,
+            alignItems: 'center',
+            width: collapsed ? '64px' : '250px',
+            ':hover': {
+              background: theme.palette.surface.grey,
+              cursor: 'pointer',
+            },
           }}
+          onClick={open}
         >
-          {getStartingLetters(userFullName)}
-        </Avatar>
+          <Stack
+            direction={'row'}
+            gap={1}
+            sx={{
+              alignItems: 'center',
+            }}
+          >
+            <Avatar
+              src={profileUrl ?? ''}
+              sx={{
+                cursor: 'pointer',
+                width: 35,
+                height: 35,
+                fontSize: '12px',
+                background: 'transparent',
+                ...avatarSx,
+              }}
+            >
+              {getStartingLetters(userFullName)}
+            </Avatar>
+            {!collapsed && (
+              <Typography variant="subtitle3">{userFullName}</Typography>
+            )}
+          </Stack>
+        </Box>
       )}
       menuListProps={{
         sx: {

package/src/components/Layout/AppLayout/types.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;
@@ -20,6 +21,9 @@ export interface AppLayoutProps {
   /** Navigation menu items */
   menu: SideMenuItemProps[];
 
+  /**User profile parameters */
+  userProfileParams: UserProfilePopupProps;
+
   /** AppBar customization - Primary approach */
   rightSection?: ReactNode;
 
@@ -31,4 +35,9 @@ export interface AppLayoutProps {
 
   /** Help documentation configuration for route-based contextual help */
   helpDocsConfig?: HelpDocsConfig;
+
+  /**
+   * Initial collapsed state for persistent sidebar
+   */
+  initialCollapsed?: boolean;
 }

package/src/components/Layout/PageHeader/components/Views/Views.tsx

@@ -9,7 +9,7 @@ import {
   resetStateForUniqueId,
   setViewForUniqueId,
 } from '../../../../../redux/slices/pageHeaderSlice';
-import { Icons, Spinner, Typography } from '../../../../export';
+import { Spinner, Typography } from '../../../../export';
 
 export type ViewsProps = {
   type: string;
@@ -37,7 +37,8 @@ export const ViewTab = ({
   return (
     <Stack onClick={onClick} sx={{ cursor: 'pointer' }} minWidth="80px">
       <Stack direction="row" gap={1} alignItems="center" padding="8px 0px">
-        <Icons.ViewsIcon />
+        {/* There is not specifix use for this icon & it is repeated for all the views */}
+        {/* <Icons.ViewsIcon /> */}
         <Typography variant="subtitle3">{title}</Typography>
       </Stack>
 

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -68,7 +68,7 @@ const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
   justifyContent: 'space-between',
   height: '52px',
   paddingLeft: '12px',
-  backgroundColor: theme.palette.surface.defaultBackground,
+  backgroundColor: theme.palette.surface.paperBackground,
   [theme.breakpoints.down('md')]: {
     paddingLeft: '0px',
   },

package/src/components/Navigation/Sidebar/SidebarV2.tsx

@@ -158,7 +158,7 @@ export const SidebarV2 = ({
       transition={{ duration: 0.3, ease: 'circOut' }}
       style={{
         margin: isSmallScreen ? '12px 12px 0px 12px' : '12px',
-        height: isSmallScreen ? '100%' : 'calc(100vh - 24px)',
+        height: 'calc(100vh - 116px)',
       }}
     >
       <StyledSidebarContainer

package/src/themes/colorTokens/darkColorTokens.tsx

@@ -22,7 +22,7 @@ export const DarkColorTokens = {
     primaryContrast: ColorPalette.BlueGreyColors.BlueGrey800,
   },
   surface: {
-    defaultBackground: ColorPalette.BlueGreyColors.BlueGrey600,
+    defaultBackground: ColorPalette.BlueGreyColors.BlueGrey800,
     paperBackground: ColorPalette.BlueGreyColors.BlueGrey800,
     grey: ColorPalette.BlueGreyColors.BlueGrey400,
   },

package/src/themes/colorTokens/lightColorTokens.ts

@@ -22,7 +22,7 @@ export const LightColorTokens = {
     primaryContrast: ColorPalette.GreyColors.White,
   },
   surface: {
-    defaultBackground: ColorPalette.BlueGreyColors.BlueGrey100,
+    defaultBackground: ColorPalette.GreyColors.White,
     paperBackground: ColorPalette.GreyColors.White,
     grey: ColorPalette.GreyColors.Grey100,
   },

package/src/themes/commonTheme.ts

@@ -620,7 +620,7 @@ export const getCommonTheme = (mode: Theme) => {
           },
           subtitle3: {
             fontSize: '14px',
-            fontWeight: 400,
+            fontWeight: 500,
             fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },