feat(dashboard): enhance layout styles and improve header navigation appearance

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

@@ -10,5 +10,6 @@ export function dashboardLayoutVars(theme: Theme) {
     '--layout-dashboard-content-pt': theme.spacing(1),
     '--layout-dashboard-content-pb': theme.spacing(8),
     '--layout-dashboard-content-px': theme.spacing(5),
+    '--layout-header-zIndex': theme.zIndex.drawer + 2,
   };
 }

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

@@ -58,6 +58,35 @@ export function DashboardLayout({
       },
     };
 
+    const inheritedHeaderSx = slotProps?.header?.sx;
+
+    const headerSx: HeaderSectionProps['sx'] = [
+      (t) => ({
+        bgcolor: '#a52431',
+        color: t.vars.palette.common.white,
+        zIndex: 'var(--layout-header-zIndex)',
+        '--color': t.vars.palette.common.white,
+        '& .MuiButtonBase-root, & .MuiIconButton-root, & .MuiTypography-root, & .MuiSvgIcon-root': {
+          color: t.vars.palette.common.white,
+        },
+        '& .MuiInputBase-root': {
+          color: t.vars.palette.common.white,
+          bgcolor: 'rgba(255, 255, 255, 0.12)',
+          '& .MuiInputBase-input::placeholder': {
+            color: 'rgba(255, 255, 255, 0.72)',
+          },
+          '& .MuiSvgIcon-root': {
+            color: t.vars.palette.common.white,
+          },
+        },
+      }),
+      ...(Array.isArray(inheritedHeaderSx)
+        ? inheritedHeaderSx
+        : inheritedHeaderSx
+          ? [inheritedHeaderSx]
+          : []),
+    ];
+
     const headerSlots: HeaderSectionProps['slots'] = {
       topArea: (
         <Alert severity="info" sx={{ display: 'none', borderRadius: 0 }}>
@@ -94,11 +123,12 @@ export function DashboardLayout({
     return (
       <HeaderSection
         disableElevation
+        disableOffset
         layoutQuery={layoutQuery}
         {...slotProps?.header}
         slots={{ ...headerSlots, ...slotProps?.header?.slots }}
         slotProps={merge(headerSlotProps, slotProps?.header?.slotProps ?? {})}
-        sx={slotProps?.header?.sx}
+        sx={headerSx}
       />
     );
   };
@@ -129,7 +159,7 @@ export function DashboardLayout({
       cssVars={{ ...dashboardLayoutVars(theme), ...cssVars }}
       sx={[
         {
-          [`& .${layoutClasses.sidebarContainer}`]: {
+          [`& .${layoutClasses.main}`]: {
             [theme.breakpoints.up(layoutQuery)]: {
               pl: 'var(--layout-nav-vertical-width)',
               transition: theme.transitions.create(['padding-left'], {

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

@@ -47,15 +47,17 @@ export function NavDesktop({
       sx={{
         pt: 2.5,
         px: 2.5,
-        top: 0,
+        top: 'var(--layout-header-desktop-height)',
         left: 0,
-        height: 1,
+        height: 'calc(100% - var(--layout-header-desktop-height))',
         display: 'none',
         position: 'fixed',
         flexDirection: 'column',
         zIndex: 'var(--layout-nav-zIndex)',
         width: 'var(--layout-nav-vertical-width)',
-        borderRight: `1px solid ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)}`,
+        bgcolor: '#ffe8ed',
+        color: '#4a0f14',
+        borderRight: `1px solid ${varAlpha('74 15 20', 0.12)}`,
         [theme.breakpoints.up(layoutQuery)]: {
           display: 'flex',
         },
@@ -96,6 +98,8 @@ export function NavMobile({
           px: 2.5,
           overflow: 'unset',
           width: 'var(--layout-nav-mobile-width)',
+          bgcolor: '#ffe8ed',
+          color: '#4a0f14',
           ...sx,
         },
       }}
@@ -112,12 +116,8 @@ export function NavContent({ data, slots, workspaces, sx }: NavContentProps) {
 
   return (
     <>
-      <Logo />
-
       {slots?.topArea}
 
-      <WorkspacesPopover data={workspaces} sx={{ my: 2 }} />
-
       <Scrollbar fillContent>
         <Box
           component="nav"
@@ -156,14 +156,14 @@ export function NavContent({ data, slots, workspaces, sx }: NavContentProps) {
                         borderRadius: 0.75,
                         typography: 'body2',
                         fontWeight: 'fontWeightMedium',
-                        color: theme.vars.palette.text.secondary,
+                        color: '#4a0f14',
                         minHeight: 44,
                         ...(isActived && {
                           fontWeight: 'fontWeightSemiBold',
-                          color: theme.vars.palette.primary.main,
+                          color: '#4a0f14',
-                          bgcolor: varAlpha(theme.vars.palette.primary.mainChannel, 0.08),
+                          bgcolor: 'rgba(74, 15, 20, 0.12)',
                           '&:hover': {
-                            bgcolor: varAlpha(theme.vars.palette.primary.mainChannel, 0.16),
+                            bgcolor: 'rgba(74, 15, 20, 0.18)',
                           },
                         }),
                       }),