diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte index 4dc3cb3..ce458fa 100644 --- a/src/lib/components/LeftSidebar.svelte +++ b/src/lib/components/LeftSidebar.svelte @@ -29,120 +29,153 @@ const activeAbout = $derived( groupsStore.list.find((g) => g.id === activeRoom)?.about ?? "", ); + + // Bottom fade shown while the nav has more content below the fold. + let navEl = $state(null); + let moreBelow = $state(false); + + function updateFade() { + const el = navEl; + if (!el) return; + moreBelow = el.scrollTop + el.clientHeight < el.scrollHeight - 1; + } + + $effect(() => { + const el = navEl; + if (!el) return; + const ro = new ResizeObserver(updateFade); + ro.observe(el); + for (const child of el.children) ro.observe(child); + return () => ro.disconnect(); + });