@campxdev/react-blueprint 2.3.9 → 2.3.10

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

@@ -1,171 +0,0 @@
-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}`,
-}));