From a2673216c97340a1e7b0e16707b4b97831f387a8 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Wed, 10 Dec 2025 15:23:13 +0100
Subject: [PATCH] feat(dashboard): update NavMobile component to use onToggle
 for menu button and adjust layout styles for responsiveness

---
 .../dd-hub-react/src/layouts/dashboard/layout.tsx   | 13 ++++++++-----
 .../dd-hub-react/src/layouts/dashboard/nav.tsx      | 10 +++++++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/client/dd-hub-react/src/layouts/dashboard/layout.tsx b/src/client/dd-hub-react/src/layouts/dashboard/layout.tsx
index 275cb63..539df4a 100644
--- a/src/client/dd-hub-react/src/layouts/dashboard/layout.tsx
+++ b/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
-            onClick={onOpen}
-            sx={{ mr: 1, ml: -1, [theme.breakpoints.up(layoutQuery)]: { display: 'none' } }}
+          <MenuButton onClick={onToggle} sx={{ mr: 1, ml: -1 }} />
+          <NavMobile
+            data={navData}
+            open={open}
+            onClose={onClose}
+            workspaces={_workspaces}
+            layoutQuery={layoutQuery}
           />
-          <NavMobile data={navData} open={open} onClose={onClose} workspaces={_workspaces} />
         </>
       ),
       rightArea: (
diff --git a/src/client/dd-hub-react/src/layouts/dashboard/nav.tsx b/src/client/dd-hub-react/src/layouts/dashboard/nav.tsx
index 63a5d0c..4e98f69 100644
--- a/src/client/dd-hub-react/src/layouts/dashboard/nav.tsx
+++ b/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,
         },
       }}