feat(sidebar): add visual item grouping for parent-child items

src/lib/components/SideBar.svelte

@@ -21,36 +21,54 @@
 	// let expandedIcon = $derived(expanded ? PanelRightCloseIcon : PanelRightOpenIcon);
 </script>
 
-<div>
-	<Navigation.Rail expanded={sidebarState.isOpen} {classes}>
-		{#snippet header()}
-			<Navigation.Tile title={expandedText}>
-				<button onclick={() => (sidebarState.isOpen = !sidebarState.isOpen)} class="btn">
-					{#if sidebarState.isOpen}
-						<SidebarCloseIcon />
-					{:else}
-						<SidebarOpenIcon />
-					{/if}
-				</button>
-			</Navigation.Tile>
-		{/snippet}
-		{#snippet tiles()}
-			<!-- TODO handle nav item children (could just use dividers for grouping) -->
-			{#each sidebarState.content.items as item, index}
-				<Navigation.Tile
-					id={index.toString()}
-					label={item.title}
-					labelExpanded={item.description}
-					href={item.href}
-				>
-					<item.icon />
-				</Navigation.Tile>
-			{/each}
-		{/snippet}
-		{#snippet footer()}
-			<Navigation.Tile labelExpanded="Settings" href="/settings" title="settings"
-				><SettingsIcon /></Navigation.Tile
+<!--<div class="flex flex-col h-full"> -->
+<!--	<Navigation.Rail expanded={sidebarState.isOpen} {classes}> -->
+<Navigation.Rail expanded={sidebarState.isOpen} {classes}>
+	{#snippet header()}
+		<!--<button onclick={() => (sidebarState.isOpen = !sidebarState.isOpen)} class="btn"> -->
+		<Navigation.Tile
+			id="header-tile"
+			title={expandedText}
+			onclick={(id) => (sidebarState.isOpen = !sidebarState.isOpen)}
+		>
+			<ChevronRight />
+		</Navigation.Tile>
+		<!--</button> -->
+	{/snippet}
+	{#snippet tiles()}
+		<!-- TODO improve visual item grouping for items with children -->
+		{#each sidebarState.content.items as item, index}
+			{#if item.children}
+				<hr class="hr border-t-2" />
+			{/if}
+			<Navigation.Tile
+				id={index.toString()}
+				label={item.title}
+				labelExpanded={item.description}
+				href={item.href}
 			>
-		{/snippet}
-	</Navigation.Rail>
-</div>
+				<item.icon />
+			</Navigation.Tile>
+
+			{#if item.children}
+				{#each item.children! as itemCh, indexCh}
+					<Navigation.Tile
+						id={index.toString().concat('-', indexCh.toString())}
+						label={itemCh.title}
+						labelExpanded={itemCh.description}
+						href={itemCh.href}
+					>
+						<itemCh.icon />
+					</Navigation.Tile>
+				{/each}
+				<hr class="hr border-t-2" />
+			{/if}
+		{/each}
+	{/snippet}
+	{#snippet footer()}
+		<Navigation.Tile labelExpanded="Settings" href="/settings" title="settings"
+			><SettingsIcon /></Navigation.Tile
+		>
+	{/snippet}
+</Navigation.Rail>
+<!-- </div> -->

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

@@ -26,11 +26,11 @@
 	});
 </script>
 
-<div class="grid-rows-auto[auto_1fr_auto] grid h-screen">
-	<!-- Top Bar -->
+<div class="grid grid-rows-[auto_1fr_auto]">
+	<!-- Header 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"
+		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">
 			<p class="text-2xl font-extrabold">
@@ -42,19 +42,18 @@
 		<div class="justify-self-end"><ThemeToggle /></div>
 	</header>
 
-	<!-- Columns -->
-	<div class="grid grid-cols-1 md:grid-cols-[auto_1fr]">
+	<!-- 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)]" />
+		<!--<SideBar classes="sticky top-0 col-span-1 h-[calc(100vh-{headerHeight}px)]" /> -->
+		<SideBar classes="sticky top-0 col-span-1 h-screen" />
 
 		<!-- Page Route Content -->
-		<main class="col-span-1 space-y-4 p-2 bg-surface-200-800">
-			{@render children?.()}
-		</main>
+		<main class="col-span-1 space-y-4 p-2 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">