simplify layout (bars fixed instead of sticky with scrolling main content)

src/lib/components/SideBar.svelte

@@ -13,36 +13,27 @@
 	import { sidebarState } from '$lib/stores/layout.svelte';
 	import { Navigation } from '@skeletonlabs/skeleton-svelte';
 
-	let { classes = 'sticky top-0 col-span-1 h-screen' }: { classes?: string } = $props();
+	// let { classes = 'sticky top-0 col-span-1 h-screen' }: { classes?: string } = $props();
 
-	let expandedText = $derived(sidebarState.isOpen ? 'Collapse' : 'Expand');
+	// let expandedText = $derived(sidebarState.isOpen ? 'Collapse' : 'Expand');
 	// let expandedIcon = $derived(expanded ? PanelRightCloseIcon : PanelRightOpenIcon);
 </script>
 
 <!-- TODO ensure active tile stays active after page reload -->
-<Navigation.Rail
-	expanded={sidebarState.isOpen}
-	height="h-screen"
-	base=""
-	classes="sticky top-0 col-span-1 "
->
+<Navigation.Rail expanded={sidebarState.isOpen}>
 	{#snippet header()}
 		<!-- TODO improve collapse/expand button styling and positioning -->
-		<!--<div>
-			<button onclick={() => (sidebarState.isOpen = !sidebarState.isOpen)} class="btn btn-sm">
-				{#if sidebarState.isOpen}
-					<ChevronLeft />
-				{:else}
-					<ChevronRight />
-				{/if}
-			</button>
-		</div>
-		-->
+		<button onclick={() => (sidebarState.isOpen = !sidebarState.isOpen)} class="btn btn-sm w-full">
+			{#if sidebarState.isOpen}
+				<ChevronLeft />
+			{:else}
+				<ChevronRight />
+			{/if}
+		</button>
 
 		<Navigation.Tile id="header-tile" title="Home" labelExpanded="Home" href="/">
 			<HomeIcon />
 		</Navigation.Tile>
-		<!--</button> -->
 	{/snippet}
 	{#snippet tiles()}
 		<!-- TODO improve visual item grouping for items with children -->

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

 <script lang="ts">
-	import { page } from '$app/state';
 	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);
+	// let headerElement: HTMLElement | null = null;
+	// let headerHeight: number | null = $state(null);
 
-	onMount(() => {
-		const updateHeaderHeight = () => {
-			if (headerElement !== null) {
-				headerHeight = headerElement.offsetHeight;
-			}
-		};
+	// onMount(() => {
+	// 	const updateHeaderHeight = () => {
+	// 		if (headerElement !== null) {
+	// 			headerHeight = headerElement.offsetHeight;
+	// 		}
+	// 	};
 
-		updateHeaderHeight();
-		window.addEventListener('resize', updateHeaderHeight);
+	// 	updateHeaderHeight();
+	// 	window.addEventListener('resize', updateHeaderHeight);
 
-		return () => {
-			window.removeEventListener('resize', updateHeaderHeight);
-		};
-	});
+	// 	return () => {
+	// 		window.removeEventListener('resize', updateHeaderHeight);
+	// 	};
+	// });
 </script>
 
-<div class="grid grid-rows-[auto_1fr_auto]">
-	<!-- Header Bar -->
+<div class="grid h-screen grid-rows-[auto_1fr_auto]">
+	<!-- Header -->
 	<header
-		bind:this={headerElement}
 		class="text-slate-50-950 grid grid-cols-3 items-center gap-4 px-4 py-2 bg-primary-200-800"
 	>
 		<div class="justify-self-start">
@@ -41,20 +38,22 @@
 		<div class="justify-self-center text-xl">(Page Title/breadcrumbs?)</div>
 		<div class="justify-self-end"><ThemeToggle /></div>
 	</header>
-
-	<!-- Page -->
-	<div class="grid 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-{headerHeight}px)]" /> -->
-
-		<aside class="sticky top-0 col-span-1 h-screen bg-yellow-500 p-4">(sidebar)</aside>
-
-		<!-- Page Route Content -->
-		<main class="col-span-1 space-y-4 p-2 bg-surface-200-800">{@render children?.()}</main>
+	<!--<nav>(subheader/trail nav)</nav>-->
+
+	<!-- Grid Columns -->
+	<div class="grid grid-cols-1 overflow-hidden md:grid-cols-[auto_1fr]">
+		<!-- Sidebar -->
+		<!-- TODO change for small screen sizes -->
+		<!-- h-full? apply h-screen if sticky -->
+		<SideBar />
+
+		<!-- main + footer container (so that the footer scrolls into view after main) -->
+		<main class="space-y-4 overflow-y-auto p-4 bg-surface-200-800">
+			{@render children?.()}
+		</main>
 	</div>
-
 	<!-- Footer -->
-	<footer class="bg-blue-500 p-4">(footer)</footer>
+	<!--<footer class="bg-blue-500 p-4">(footer)</footer>-->
 </div>
 
 <style lang="postcss">