feat(layout): enhance mobile navigation with title and improved layout structure

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,8 @@ 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 Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import { _langs, _notifications } from 'src/_mock';
 
@@ -48,8 +50,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'] = {
@@ -94,17 +107,23 @@ export function DashboardLayout({
         </Alert>
       ),
       leftArea: (
-        <>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
           {/** @slot Nav mobile */}
-          <MenuButton onClick={onToggle} sx={{ mr: 1, ml: -1 }} />
+          <MenuButton
+            onClick={isDesktop ? onDesktopToggle : onMobileToggle}
+            sx={{ ml: -1 }}
+          />
+          <Typography variant="h6" sx={{ fontWeight: 700 }}>
+            Digital Data Hub
+          </Typography>
           <NavMobile
             data={navData}
-            open={open}
-            onClose={onClose}
+            open={mobileOpen}
+            onClose={onMobileClose}
             workspaces={_workspaces}
             layoutQuery={layoutQuery}
           />
-        </>
+        </Box>
       ),
       rightArea: (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0, sm: 0.75 } }}>
@@ -150,7 +169,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 +188,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 (
@@ -55,9 +56,15 @@ export function NavDesktop({
         flexDirection: 'column',
         zIndex: 'var(--layout-nav-zIndex)',
         width: 'var(--layout-nav-vertical-width)',
-        bgcolor: '#ffe8ed',
-        color: '#4a0f14',
-        borderRight: `1px solid ${varAlpha('74 15 20', 0.12)}`,
+        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',
         },
@@ -102,8 +109,8 @@ export function NavMobile({
           overflow: 'unset',
           height: 'calc(100% - var(--layout-header-mobile-height))',
           width: 'var(--layout-nav-mobile-width)',
-          bgcolor: '#ffe8ed',
-          color: '#4a0f14',
+          bgcolor: '#ffffff',
+          color: '#5a1a22',
           [theme.breakpoints.up(layoutQuery)]: {
             top: 'var(--layout-header-desktop-height)',
             height: 'calc(100% - var(--layout-header-desktop-height))',
@@ -164,14 +171,14 @@ export function NavContent({ data, slots, workspaces, sx }: NavContentProps) {
                         borderRadius: 0.75,
                         typography: 'body2',
                         fontWeight: 'fontWeightMedium',
-                        color: '#4a0f14',
+                        color: '#5a1a22',
                         minHeight: 44,
                         ...(isActived && {
                           fontWeight: 'fontWeightSemiBold',
-                          color: '#4a0f14',
-                          bgcolor: 'rgba(74, 15, 20, 0.12)',
+                          color: '#5a1a22',
+                          bgcolor: 'rgba(90, 24, 34, 0.08)',
                           '&:hover': {
-                            bgcolor: 'rgba(74, 15, 20, 0.18)',
+                            bgcolor: 'rgba(90, 24, 34, 0.14)',
                           },
                         }),
                       }),