fixed scroll issue for dashboard, improved code structure

packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/header.tsx

@@ -119,9 +119,6 @@ export function Header(props: SheetProps & {
         alignItems: 'stretch',
         height: `${headerHeight}px`,
         flexShrink: 0,
-        [isCompactMediaQuery]: {
-          display: "flex",
-        },
         ...sheetProps.sx ?? {},
       }}
     >

packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Divider, Drawer, Stack, useTheme } from "@mui/joy";
+import { Box, Drawer, Stack, useTheme } from "@mui/joy";
 import { useState } from "react";
 import { Sidebar } from "./sidebar";
 import { AdminAppProvider } from "./useAdminInterface";
@@ -59,28 +59,12 @@ export default function Layout(props: { children: React.ReactNode, params: { pro
         alignItems="flex-start"
       >
         <Sidebar
+          isCompactMediaQuery={isCompactMediaQuery}
           headerHeight={headerHeight}
           navigationItems={navigationItems}
-          variant="outlined"
-          sx={{
-            position: 'sticky',
-            top: 0,
-            height: `100vh`,
-            [isCompactMediaQuery]: {
-              top: `${headerHeight}px`,
-              height: `calc(100vh - ${headerHeight}px)`,
-            },
-            overflowY: 'auto',
-            borderLeft: 'none',
-            borderTop: 'none',
-            borderBottom: 'none',
-            width: '250px',
-            flexShrink: 0,
-            display: 'block',
-            [isCompactMediaQuery]: { display: 'none' },
-          }}
+          mode='full'
         />
-        <Stack flexGrow={1} direction="column" overflow='hidden'>
+        <Stack flexGrow={1} direction="column" sx={{ overflow: 'hidden', height: '100vh' }}>
           <Header
             headerHeight={headerHeight}
             navigationItems={navigationItems}
@@ -92,6 +76,7 @@ export default function Layout(props: { children: React.ReactNode, params: { pro
             flexGrow={1}
             paddingY={2}
             minWidth={0}
+            overflow='auto'
           >
             <Box component="main">
               {props.children}
@@ -104,8 +89,10 @@ export default function Layout(props: { children: React.ReactNode, params: { pro
         onClose={() => setIsSidebarOpen(false)}
       >
         <Sidebar
+          isCompactMediaQuery={isCompactMediaQuery}
           headerHeight={headerHeight}
           navigationItems={navigationItems}
+          mode='compact'
         />
       </Drawer>
     </AdminAppProvider>

packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/sidebar.tsx

@@ -13,7 +13,7 @@ import Typography from '@mui/joy/Typography';
 import { useAdminApp } from './useAdminInterface';
 import { usePathname } from 'next/navigation';
 import { useUser } from 'stack';
-import { Dropdown, MenuButton, MenuItem, Menu, useColorScheme, Stack, Link, Sheet, SheetProps } from '@mui/joy';
+import { Dropdown, MenuButton, MenuItem, Menu, useColorScheme, Stack, Sheet } from '@mui/joy';
 import { Icon } from '@/components/icon';
 import { AsyncButton } from '@/components/async-button';
 import { Logo } from '@/components/logo';
@@ -101,16 +101,36 @@ function AvatarSection() {
   );
 }
 
-export function Sidebar(props : SheetProps & { 
+export function Sidebar(props: { 
+  isCompactMediaQuery: string,
   headerHeight: number, 
   navigationItems: { name: string, href: string, icon: React.ReactNode }[],
+  mode: 'compact' | 'full',
 }) {
   const stackAdminApp = useAdminApp();
   const basePath = `/projects/${stackAdminApp.projectId}`;
 
   const { headerHeight, navigationItems, ...sheetProps} = props;
   return (
-    <Sheet {...sheetProps}>
+    <Sheet
+      variant="outlined"        
+      sx={props.mode === 'full' ? {
+        position: 'sticky',
+        top: 0,
+        height: `100vh`,
+        [props.isCompactMediaQuery]: {
+          top: `${headerHeight}px`,
+          height: `calc(100vh - ${headerHeight}px)`,
+        },
+        overflowY: 'auto',
+        borderLeft: 'none',
+        borderTop: 'none',
+        borderBottom: 'none',
+        width: '250px',
+        flexShrink: 0,
+        display: 'block',
+        [props.isCompactMediaQuery]: { display: 'none' },
+      } : {}}>
       <Stack
         sx={{
           height: '100dvh',