feat(layout): add toggleable sidebar width on dashboard

- Introduce state for managing sidebar width in DashboardLayout. - Add interactive button to toggle sidebar width between mini and vertical. - Update NavVertical component to accept and utilize the new sidebarWidth prop.
WatchItDev · Nov 14, 2024 · 492ff1a · 492ff1a
1 parent ac409da
commit 492ff1a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 47 deletions.
diff --git a/src/layouts/dashboard/layout.tsx b/src/layouts/dashboard/layout.tsx
@@ -7,6 +7,13 @@ import Main from './main';
 // import Header from './header';
 import NavMini from './nav-mini';
 import NavVertical from './nav-vertical';
+import {useState} from "react";
+import {NAV} from "@src/layouts/config-layout.ts";
+import Stack from "@mui/material/Stack";
+import {
+  IconChevronLeft,
+  IconChevronRight
+} from "@tabler/icons-react";
 
 // ----------------------------------------------------------------------
 
@@ -16,7 +23,17 @@ type Props = {
 
 export default function DashboardLayout({ children }: Props) {
   const nav = useBoolean();
-
+  const [sidebarWidth, setSidebarWidth ] = useState(NAV.W_VERTICAL); // State to control LoginModal visibility
+  const [triggerPosition, setTriggerPosition ] = useState(NAV.W_MINI + NAV.W_VERTICAL ); // State to control LoginModal visibility
+  const toggleSidebarWidth = () => {
+    if (sidebarWidth === NAV.W_VERTICAL) {
+      setSidebarWidth(NAV.W_MINI);
+      setTriggerPosition(NAV.W_MINI *2 - 1);
+    } else {
+      setSidebarWidth(NAV.W_VERTICAL);
+      setTriggerPosition(NAV.W_MINI + NAV.W_VERTICAL - 1);
+    }
+  };
   return (
     <>
       {/* <Header onOpenNav={nav.onTrue} /> */}
@@ -28,8 +45,41 @@ export default function DashboardLayout({ children }: Props) {
           flexDirection: { xs: 'column', md: 'row' },
         }}
       >
+        <Box sx={{
+          borderTopRightRadius: '10px',
+          borderBottomRightRadius: '10px',
+          borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
+          borderTop: (theme) => `dashed 1px ${theme.palette.divider}`,
+          borderBottom: (theme) => `dashed 1px ${theme.palette.divider}`,
+          transition: 'all 0.7s ease',
+          position: 'fixed',
+          top: '7px',
+          left: triggerPosition,
+          cursor: 'pointer',
+          zIndex: 20,
+        }}>
+          <Stack
+            style={{margin: 0, padding: '7px 1px'}}
+            direction="row"
+            justifyContent="flex-end"
+            sx={{
+              backgroundColor: '#2B2D31',
+              borderTopRightRadius: '10px',
+              borderBottomRightRadius: '10px'
+            }}
+          >
+            <Box sx={{display: 'flex'}} onClick={toggleSidebarWidth}>
+              {
+                sidebarWidth === NAV.W_VERTICAL ? (
+                  <IconChevronLeft />
+                ) : (
+                  <IconChevronRight />)
+              }
+            </Box>
+          </Stack>
+        </Box>
         <NavMini />
-        <NavVertical openNav={nav.value} onCloseNav={nav.onFalse} />
+        <NavVertical openNav={nav.value} onCloseNav={nav.onFalse} sidebarWidth={sidebarWidth} />
         <Main>{children}</Main>
       </Box>
     </>

diff --git a/src/layouts/dashboard/nav-vertical.tsx b/src/layouts/dashboard/nav-vertical.tsx
@@ -22,27 +22,23 @@ 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';
-
 // ----------------------------------------------------------------------
 
 type Props = {
   openNav: boolean;
   onCloseNav: VoidFunction;
+  sidebarWidth: number;
 };
 
 // ----------------------------------------------------------------------
 
-export default function NavVertical({ openNav, onCloseNav }: Props) {
+export default function NavVertical({ openNav, onCloseNav, sidebarWidth}: Props) {
   const pathname = usePathname();
   const lgUp = useResponsive('up', 'lg');
   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) {
@@ -59,13 +55,6 @@ 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
@@ -85,36 +74,7 @@ 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 />
 
@@ -178,9 +138,10 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
       {lgUp ? (
         <Stack
           sx={{
+            transition: 'all 0.7s ease',
             height: 1,
             position: 'fixed',
-            width: NAV.W_VERTICAL,
+            width: sidebarWidth,
             borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
           }}
         >