refactor: improve sidebar layout and CSS variable handling in DashboardLayout component

Author: JasonKrik

services/frontend/src/components/DashboardLayout.vue

@@ -13,44 +13,68 @@ const props = defineProps<Props>()
 // For now, defaulting to true.
 const defaultOpen = ref(true)
 
-// Define sidebar width. The shadcn/ui example uses `calc(var(--spacing) * 72)`.
-// Assuming var(--spacing) is ~4px, this is 288px. Let's use 18rem (288px).
-// The shadcn-vue sidebar components should pick up this CSS variable.
+// Define sidebar width using the default values from the sidebar utils
+// The sidebar components expect these specific CSS variables
 const sidebarStyle = computed(() => ({
-  '--sidebar-width': '18rem',
-  // '--sidebar-width-mobile': '16rem', // Optional: if your AppSidebar handles mobile width
+  '--sidebar-width': '16rem',
+  '--sidebar-width-mobile': '18rem',
+  '--sidebar-width-icon': '3rem',
 } as StyleValue))
 
 // A simple ref for the SiteHeader, can be expanded later
 // For now, just using the title prop.
 </script>
 
 <template>
-  <div class="flex h-screen w-full overflow-hidden"> {/* Ensure full screen and no body scroll */}
-    <SidebarProvider :default-open="defaultOpen" :style="sidebarStyle">
-      <AppSidebar variant="inset" />
-      <SidebarInset>
-        <!-- SiteHeader equivalent -->
-        <header class="sticky top-0 z-30 flex h-16 items-center justify-between gap-4 border-b bg-background px-4 sm:px-6">
-          <div class="flex items-center gap-2">
-            <SidebarTrigger class="-ml-1 lg:hidden" />
-            <h1 class="text-lg font-semibold md:text-xl">{{ props.title }}</h1>
-          </div>
-          <!-- Add other header elements like user menu, search, etc. here if needed -->
-        </header>
-
-        <!-- Main content area -->
-        <main class="flex flex-1 flex-col overflow-auto p-4 pt-2 md:gap-4 md:p-6 md:pt-4">
-          <slot />
-        </main>
-      </SidebarInset>
-    </SidebarProvider>
-  </div>
+  <SidebarProvider :default-open="defaultOpen" :style="sidebarStyle">
+    <AppSidebar variant="inset" />
+    <SidebarInset>
+      <!-- SiteHeader equivalent -->
+      <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+        <div class="flex items-center gap-2 px-4">
+          <SidebarTrigger class="-ml-1" />
+          <h1 class="text-lg font-semibold md:text-xl">{{ props.title }}</h1>
+        </div>
+      </header>
+      
+      <!-- Content area -->
+      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+        <slot />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
 </template>
 
 <style>
 /* Optional: Ensure body doesn't scroll if the layout is truly full-page */
 /* body {
   overflow: hidden;
 } */
+
+/* Fix the sidebar layout by ensuring CSS variables work */
+.group\/sidebar-wrapper {
+  display: flex;
+  min-height: 100svh;
+  width: 100%;
+}
+
+/* Ensure the spacer div actually takes up space */
+.group\/sidebar-wrapper .group.peer [class*="w-[--sidebar-width]"] {
+  width: var(--sidebar-width) !important;
+}
+
+/* Force the main content to account for sidebar space */
+@media (min-width: 768px) {
+  .group\/sidebar-wrapper:has([data-variant="inset"]) main {
+    margin: 0.5rem;
+    margin-left: 0;
+    border-radius: 0.75rem;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  }
+  
+  /* Ensure the sidebar spacer works */
+  .group\/sidebar-wrapper .group.peer {
+    flex-shrink: 0;
+  }
+}
 </style>