@campxdev/react-blueprint 2.3.8 → 2.3.10

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,8 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   currentMenuPath,
   internalMenuClickHandler,
   onClose,
+  collapsed,
+  setCollapsed,
 }) => {
   const { name, path, icon, menu: internalMenu, subMenu } = menuItem;
   const newPath = currentMenuPath ? `${currentMenuPath}${path}` : path;
@@ -29,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,
@@ -41,9 +47,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 +59,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 +84,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 +97,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 +166,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 +222,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 +255,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/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

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

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,14 +1,14 @@
-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 */
-  designation?: string;
+  /** User's email */
+  email?: string;
   /** Profile dropdown actions (custom menu items) */
   profileActions?: React.ReactNode[];
   /** Logout click handler */
@@ -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,8 +54,9 @@ const getStartingLetters = (text: string) => {
  * />
  */
 export const UserProfilePopup: React.FC<UserProfilePopupProps> = ({
+  collapsed,
   userFullName,
-  designation = '',
+  email = '',
   profileActions = [],
   onLogout,
   profileUrl,
@@ -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: {
@@ -135,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

@@ -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,12 @@ export interface AppLayoutProps {
   /** Navigation menu items */
   menu: SideMenuItemProps[];
 
+  /**User profile parameters */
+  userProfileParams: UserProfilePopupProps;
+
+  /** AppBar customization - Primary approach */
+  leftSection?: ReactNode;
+
   /** AppBar customization - Primary approach */
   rightSection?: ReactNode;
 
@@ -31,4 +38,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',
   },