feat: add collapsible sidebar to dashboard layout

- Introduced a state `sidebarWidth` to control the sidebar width. - Added toggle functionality for collapsing and expanding the sidebar. - Integrated new icons to visually indicate sidebar state. - Modified `NavSectionVertical` to adapt subheader display based on sidebar state. - Applied smooth transition styles for sidebar and main component layout changes.
WatchItDev · Nov 12, 2024 · ac409da · ac409da
1 parent 84bd980
commit ac409da
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git a/src/components/nav-section/types.ts b/src/components/nav-section/types.ts
@@ -42,4 +42,5 @@ export type NavSectionProps = StackProps & {
     items: NavListProps[];
   }[];
   config?: NavConfigProps;
+  size?: 'collapsed' | 'full';
 };
diff --git a/src/components/nav-section/vertical/nav-section-vertical.tsx b/src/components/nav-section/vertical/nav-section-vertical.tsx
@@ -12,13 +12,13 @@ import NavList from './nav-list';
 
 // ----------------------------------------------------------------------
 
-function NavSectionVertical({ data, config, sx, ...other }: NavSectionProps) {
+function NavSectionVertical({ data, config, sx, size, ...other }: NavSectionProps) {
   return (
     <Stack sx={sx} {...other}>
       {data.map((group, index) => (
         <Group
           key={group.subheader || index}
-          subheader={group.subheader ?? ''}
+          subheader={group.subheader && size==='full' ?group.subheader : ''}
           items={group.items}
           config={navVerticalConfig(config)}
         />

diff --git a/src/layouts/dashboard/main.tsx b/src/layouts/dashboard/main.tsx
@@ -18,6 +18,7 @@ export default function Main({ children, sx, ...other }: BoxProps) {
     <Box
       component="main"
       sx={{
+        transition: 'all 0.7s ease',
         flexGrow: 1,
         minHeight: 1,
         display: 'flex',

diff --git a/src/layouts/dashboard/nav-vertical.tsx b/src/layouts/dashboard/nav-vertical.tsx
@@ -22,6 +22,10 @@ import { useNavData } from './config-navigation';
 // LAYOUT IMPORTS
 import { NAV } from '../config-layout';
 import { AccountPopover, NotificationsPopover, Searchbar } from '../_common';
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse,
+} from '@tabler/icons-react';
 
 // ----------------------------------------------------------------------
 
@@ -38,6 +42,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
   const navData = useNavData();
   const { authenticated, loading } = useAuth(); // Use the AuthProvider to check authentication
   const [loginModalOpen, setLoginModalOpen] = useState(false); // State to control LoginModal visibility
+  const [sidebarWidth, setSidebarWidth ] = useState(NAV.W_VERTICAL); // State to control LoginModal visibility
 
   useEffect(() => {
     if (openNav) {
@@ -54,9 +59,20 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
     setLoginModalOpen(false);
   };
 
+  const toggleSidebarWidth = () => {
+    if (sidebarWidth === NAV.W_VERTICAL) {
+      setSidebarWidth(NAV.W_MINI);
+    } else {
+      setSidebarWidth(NAV.W_VERTICAL);
+    }
+  };
+
   const renderContent = (
     <Scrollbar
       sx={{
+        transition: 'all 0.7s ease',
+        position: 'relative',
+        width: sidebarWidth,
         height: 1,
         backgroundColor: '#2B2D31',
         display:'flex',
@@ -68,9 +84,42 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
         },
       }}
     >
+      {/*Add a icon to make collapsible the sidebar*/}
+      <Box sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: '7%',
+        right: '-5px',
+        cursor: 'pointer',
+        zIndex: 20,
+      }}>
+        <Stack
+          direction="row"
+          justifyContent="flex-end"
+          sx={{
+            padding: '5px 12px',
+            backgroundColor: 'rgba(0,0,0,.2)',
+            borderTopLeftRadius: '10px',
+            borderBottomLeftRadius: '10px'
+        }}
+        >
+          <Box onClick={toggleSidebarWidth}>
+            {
+              sidebarWidth === NAV.W_VERTICAL ? (
+                <IconLayoutSidebarLeftCollapse color={'#0FA'} />
+              ) : (
+                <IconLayoutSidebarRightCollapse />)
+            }
+          </Box>
+        </Stack>
+      </Box>
+
       <Searchbar />
 
       <NavSectionVertical
+        size={sidebarWidth === NAV.W_MINI ? 'collapsed' : 'full'}
         data={navData}
         config={{
           currentRole: 'admin',
@@ -123,7 +172,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
       component="nav"
       sx={{
         flexShrink: { lg: 0 },
-        width: { lg: NAV.W_VERTICAL },
+        width: { lg: sidebarWidth },
       }}
     >
       {lgUp ? (
@@ -143,7 +192,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
           onClose={onCloseNav}
           PaperProps={{
             sx: {
-              width: NAV.W_VERTICAL,
+              width: sidebarWidth,
             },
           }}
         >