feat(dashboard): refine layout and navigation behavior with improved transition effects

src/client/dd-hub-react/src/layouts/dashboard/css-vars.ts

@@ -5,7 +5,7 @@ import type { Theme } from '@mui/material/styles';
 export function dashboardLayoutVars(theme: Theme) {
   return {
     '--layout-transition-easing': 'linear',
-    '--layout-transition-duration': '120ms',
+    '--layout-transition-duration': '100ms',
     '--layout-nav-vertical-width': '300px',
     '--layout-dashboard-content-pt': theme.spacing(1),
     '--layout-dashboard-content-pb': theme.spacing(8),

src/client/dd-hub-react/src/layouts/dashboard/layout.tsx

@@ -6,6 +6,7 @@ import { useBoolean } from 'minimal-shared/hooks';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
 import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import { _langs, _notifications } from 'src/_mock';
 
@@ -48,8 +49,19 @@ export function DashboardLayout({
   layoutQuery = 'lg',
 }: DashboardLayoutProps) {
   const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up(layoutQuery));
 
-  const { value: open, onFalse: onClose, onToggle } = useBoolean();
+  const {
+    value: mobileOpen,
+    onFalse: onMobileClose,
+    onToggle: onMobileToggle,
+  } = useBoolean();
+
+  const {
+    value: desktopOpen,
+    onFalse: onDesktopClose,
+    onToggle: onDesktopToggle,
+  } = useBoolean(true);
 
   const renderHeader = () => {
     const headerSlotProps: HeaderSectionProps['slotProps'] = {
@@ -96,11 +108,14 @@ export function DashboardLayout({
       leftArea: (
         <>
           {/** @slot Nav mobile */}
-          <MenuButton onClick={onToggle} sx={{ mr: 1, ml: -1 }} />
+          <MenuButton
+            onClick={isDesktop ? onDesktopToggle : onMobileToggle}
+            sx={{ mr: 1, ml: -1 }}
+          />
           <NavMobile
             data={navData}
-            open={open}
+            open={mobileOpen}
-            onClose={onClose}
+            onClose={onMobileClose}
             workspaces={_workspaces}
             layoutQuery={layoutQuery}
           />
@@ -150,7 +165,12 @@ export function DashboardLayout({
        * @Sidebar
        *************************************** */
       sidebarSection={
-        <NavDesktop data={navData} layoutQuery={layoutQuery} workspaces={_workspaces} />
+        <NavDesktop
+          open={desktopOpen}
+          data={navData}
+          layoutQuery={layoutQuery}
+          workspaces={_workspaces}
+        />
       }
       /** **************************************
        * @Footer
@@ -164,7 +184,7 @@ export function DashboardLayout({
         {
           [`& .${layoutClasses.main}`]: {
             [theme.breakpoints.up(layoutQuery)]: {
-              pl: 'var(--layout-nav-vertical-width)',
+              pl: desktopOpen ? 'var(--layout-nav-vertical-width)' : 0,
               transition: theme.transitions.create(['padding-left'], {
                 easing: 'var(--layout-transition-easing)',
                 duration: 'var(--layout-transition-duration)',

src/client/dd-hub-react/src/layouts/dashboard/nav.tsx

@@ -39,7 +39,8 @@ export function NavDesktop({
   slots,
   workspaces,
   layoutQuery,
-}: NavContentProps & { layoutQuery: Breakpoint }) {
+  open = true,
+}: NavContentProps & { layoutQuery: Breakpoint; open?: boolean }) {
   const theme = useTheme();
 
   return (
@@ -58,6 +59,12 @@ export function NavDesktop({
         bgcolor: '#ffffff',
         color: '#5a1a22',
         borderRight: `1px solid ${varAlpha('90 24 34', 0.08)}`,
+        transform: open ? 'translateX(0)' : 'translateX(-100%)',
+        transition: theme.transitions.create(['transform'], {
+          easing: 'var(--layout-transition-easing)',
+          duration: 'var(--layout-transition-duration)',
+        }),
+        pointerEvents: open ? 'auto' : 'none',
         [theme.breakpoints.up(layoutQuery)]: {
           display: 'flex',
         },