From 48589d492962a8bcca33f06d78bf3ba121195c47 Mon Sep 17 00:00:00 2001
From: erdfern <rexsomnia@pm.me>
Date: Sun, 19 Jan 2025 12:43:14 +0100
Subject: [PATCH] simplify layout (bars fixed instead of sticky with scrolling
main content)
---
src/lib/components/SideBar.svelte | 29 +++++----------
src/routes/(app)/+layout.svelte | 61 +++++++++++++++----------------
2 files changed, 40 insertions(+), 50 deletions(-)
diff --git a/src/lib/components/SideBar.svelte b/src/lib/components/SideBar.svelte
index f7e35872..421c59ed 100644
--- a/src/lib/components/SideBar.svelte
+++ b/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 -->
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index d86af279..9a38a956 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,35 +1,32 @@
<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">
--
GitLab