feat(wip): dynamically calculate header height for sidebar offset

src/lib/components/SideBar.svelte

@@ -54,81 +54,3 @@
 		{/snippet}
 	</Navigation.Rail>
 </div>
-
-<!--
-<aside
-	class="sticky top-0 col-span-1 border-r-2 {sidebarState.isOpen
-		? width
-		: 'w-12'} transition-all duration-300"
->
-	<div class="relative h-full border-red-200">
-		<button
-			class="bg-surface-50-950 btn-icon absolute -right-2 z-10 top-1/2 -translate-y-1/2"
-			onclick={toggleSidebar}
-		>
-			{#if sidebarState.isOpen}
-				<ChevronLeft size={32} />
-			{:else}
-				<ChevronRight size={32} />
-			{/if}
-		</button>
-		<div class="p-4 pt-2">
-			{#if sidebarState.isOpen}
-				<div transition:slide={{ duration: 200 }}>
-					{#each sidebarState.content.items as item}
-						<div class="py-2">
-							{#if item.href}
-								<a
-									href={item.href}
-									class="hover:bg-primary-hover-token flex items-center gap-2 rounded p-2"
-								>
-									{#if item.icon}
-										<item.icon size={16} />
-									{/if}
-									<span>{item.title}</span>
-								</a>
-							{:else}
-								<div class="flex items-center gap-2 p-2">
-									{#if item.icon}
-										<item.icon size={16} />
-									{/if}
-									<span>{item.title}</span>
-								</div>
-							{/if}
-							{#if item.children}
-								<div class="ml-4">
-									{#each item.children as child}
-										<a
-											href={child.href}
-											class="hover:bg-primary-hover-token flex items-center gap-2 rounded p-2"
-										>
-											{#if child.icon}
-												<child.icon size={16} />
-											{/if}
-											<span>{child.title}</span>
-										</a>
-									{/each}
-								</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			{:else}
-				<div class="flex flex-col items-center gap-4">
-					{#each sidebarState.content.items as item}
-						{#if item.icon}
-							<a
-								href={item.href}
-								class="hover:bg-primary-hover-token btn-icon"
-								data-tooltip={item.title}
-							>
-								<item.icon size={16} />
-							</a>
-						{/if}
-					{/each}
-				</div>
-			{/if}
-		</div>
-	</div>
-</aside>
--->

src/routes/(app)/+layout.svelte

@@ -3,13 +3,33 @@
 	import SideBar from '$lib/components/SideBar.svelte';
 
 	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
+
+	let headerElement: HTMLElement | null = null;
+	let headerHeight: number | null = $state(null);
+
+	onMount(() => {
+		const updateHeaderHeight = () => {
+			if (headerElement !== null) {
+				headerHeight = headerElement.offsetHeight;
+			}
+		};
+
+		updateHeaderHeight();
+		window.addEventListener('resize', updateHeaderHeight);
+
+		return () => {
+			window.removeEventListener('resize', updateHeaderHeight);
+		};
+	});
 </script>
 
 <div class="grid-rows-auto[auto_1fr_auto] grid h-screen">
 	<!-- Top Bar -->
 	<header
+		bind:this={headerElement}
 		class="text-slate-50-950 sticky top-0 z-10 grid grid-cols-3 items-center gap-4 px-4 py-2 bg-primary-200-800"
 	>
 		<div class="justify-self-start">
@@ -25,7 +45,7 @@
 	<!-- Columns -->
 	<div class="grid grid-cols-1 md:grid-cols-[auto_1fr]">
 		<!-- Side Bar (subtract header height since it's sticky, too) -->
-		<SideBar classes="sticky top-0 col-span-1 h-[calc(100vh-100px)]" />
+		<SideBar classes="sticky top-0 col-span-1 h-[calc(100vh-{headerHeight}px)]" />
 
 		<!-- Page Route Content -->
 		<main class="col-span-1 space-y-4 p-2 bg-surface-200-800">
@@ -34,7 +54,7 @@
 	</div>
 
 	<!-- Footer -->
-	<footer class="bg-blue-500 p-4">(footer)</footer>
+	<!--<footer class="bg-blue-500 p-4">(footer)</footer>-->
 </div>
 
 <style lang="postcss">