Fix sidebar layout: header above sidebar, no mobile backdrop

- sidebar.svelte: position:absolute (was fixed) + h-full (was h-svh)
  so the desktop panel is contained within the below-header content row,
  not spanning the full viewport height
- +layout.svelte: SidebarProvider is now flex-col; header is the first
  (full-width) child; sidebar+content row is the second child with
  relative overflow-hidden so the absolute panel is clipped correctly
- sheet-content.svelte: add overlayClass prop so callers can style the
  backdrop independently of the sheet panel
- sidebar.svelte: mobile sheet uses overlayClass="bg-transparent
  pointer-events-none" — panel slides in without dark backdrop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: thomasahle

src/lib/components/ui/sheet/sheet-content.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const sheetVariants = tv({
+		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		variants: {
+			side: {
+				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+				left: "data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm",
+				right: "data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		portalProps,
+		overlayClass,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		side?: Side;
+		overlayClass?: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay class={overlayClass} />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>

src/lib/components/ui/sidebar/sidebar.svelte

@@ -43,6 +43,7 @@
 			data-slot="sidebar"
 			data-mobile="true"
 			class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			overlayClass="bg-transparent pointer-events-none"
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
 			{side}
 		>
@@ -80,7 +81,7 @@
 		<div
 			data-slot="sidebar-container"
 			class={cn(
-				"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear narrow:flex",
+				"absolute inset-y-0 z-10 hidden h-full w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear narrow:flex",
 				side === "left"
 					? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
 					: "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]",

src/routes/+layout.svelte

@@ -115,16 +115,10 @@
   </div>
 {/snippet}
 
-<SidebarProvider bind:open={sidebarOpen} class="h-dvh overflow-hidden font-sans">
-  <Sidebar collapsible="offcanvas">
-    <SidebarContent>
-      {@render navItems()}
-    </SidebarContent>
-  </Sidebar>
+<SidebarProvider bind:open={sidebarOpen} class="h-dvh overflow-hidden flex-col font-sans p-3 gap-[0.7rem] max-narrow:p-0 max-narrow:gap-0">
 
-  <!-- Main area: header + lesson content -->
-  <div class="flex-1 min-w-0 flex flex-col h-dvh overflow-hidden p-3 gap-[0.7rem] max-narrow:p-0 max-narrow:gap-0">
-    <header class="bg-surface border border-border rounded-[14px] shadow-app flex flex-col max-narrow:rounded-none max-narrow:border-x-0 max-narrow:border-t-0">
+  <!-- Header spans full width above the sidebar+content row -->
+  <header class="bg-surface border border-border rounded-[14px] shadow-app flex flex-col flex-shrink-0 max-narrow:rounded-none max-narrow:border-x-0 max-narrow:border-t-0">
       <!-- Row 1: logo + title + utility buttons -->
       <div class="flex items-center justify-between px-4 py-[0.6rem]">
         <div class="flex items-center gap-2">
@@ -194,8 +188,15 @@
         </button>
         <span class="text-[0.82rem] text-muted-foreground">{breadcrumbs}</span>
       </div>
-    </header>
+  </header>
 
+  <!-- Sidebar + lesson content row (relative so the absolute sidebar is contained here) -->
+  <div class="flex flex-1 min-h-0 relative overflow-hidden">
+    <Sidebar collapsible="offcanvas">
+      <SidebarContent>
+        {@render navItems()}
+      </SidebarContent>
+    </Sidebar>
     {@render children()}
   </div>
 </SidebarProvider>