feat(dashboard): update NavMobile component to use onToggle for menu button and adjust layout styles for responsiveness

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

@@ -49,7 +49,7 @@ export function DashboardLayout({
 }: DashboardLayoutProps) {
   const theme = useTheme();
 
-  const { value: open, onFalse: onClose, onTrue: onOpen } = useBoolean();
+  const { value: open, onFalse: onClose, onToggle } = useBoolean();
 
   const renderHeader = () => {
     const headerSlotProps: HeaderSectionProps['slotProps'] = {
@@ -96,11 +96,14 @@ export function DashboardLayout({
       leftArea: (
         <>
           {/** @slot Nav mobile */}
-          <MenuButton
+          <MenuButton onClick={onToggle} sx={{ mr: 1, ml: -1 }} />
-            onClick={onOpen}
+          <NavMobile
-            sx={{ mr: 1, ml: -1, [theme.breakpoints.up(layoutQuery)]: { display: 'none' } }}
+            data={navData}
+            open={open}
+            onClose={onClose}
+            workspaces={_workspaces}
+            layoutQuery={layoutQuery}
           />
-          <NavMobile data={navData} open={open} onClose={onClose} workspaces={_workspaces} />
         </>
       ),
       rightArea: (

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

@@ -78,8 +78,10 @@ export function NavMobile({
   slots,
   onClose,
   workspaces,
-}: NavContentProps & { open: boolean; onClose: () => void }) {
+  layoutQuery,
+}: NavContentProps & { open: boolean; onClose: () => void; layoutQuery: Breakpoint }) {
   const pathname = usePathname();
+  const theme = useTheme();
 
   useEffect(() => {
     if (open) {
@@ -96,10 +98,16 @@ export function NavMobile({
         [`& .${drawerClasses.paper}`]: {
           pt: 2.5,
           px: 2.5,
+          top: 'var(--layout-header-mobile-height)',
           overflow: 'unset',
+          height: 'calc(100% - var(--layout-header-mobile-height))',
           width: 'var(--layout-nav-mobile-width)',
           bgcolor: '#ffe8ed',
           color: '#4a0f14',
+          [theme.breakpoints.up(layoutQuery)]: {
+            top: 'var(--layout-header-desktop-height)',
+            height: 'calc(100% - var(--layout-header-desktop-height))',
+          },
           ...sx,
         },
       }}