Make the left sidebar scrollable to view all the content
This commit is contained in:
dtonon
parent
4a9c3a6454
commit
67d461333c
1 changed files with 127 additions and 94 deletions
|
|
@ -29,120 +29,153 @@
|
||||||
const activeAbout = $derived(
|
const activeAbout = $derived(
|
||||||
groupsStore.list.find((g) => g.id === activeRoom)?.about ?? "",
|
groupsStore.list.find((g) => g.id === activeRoom)?.about ?? "",
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Bottom fade shown while the nav has more content below the fold.
|
||||||
|
let navEl = $state<HTMLElement | null>(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();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<aside
|
<aside
|
||||||
class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pr-1 pb-8 pl-8 md:flex md:pt-6"
|
class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pr-1 pb-8 pl-8 md:flex md:min-h-0 md:pt-6"
|
||||||
>
|
>
|
||||||
<div>
|
<!-- Own scroll container so a long about/rooms list never pushes the
|
||||||
<a
|
account row off screen (the page wrapper clips overflow). -->
|
||||||
href="/"
|
<div class="relative min-h-0 flex-1">
|
||||||
class="mt-3 mb-6 flex min-w-0 flex-col hover:opacity-90"
|
<div
|
||||||
aria-label="{name} — home"
|
bind:this={navEl}
|
||||||
|
onscroll={updateFade}
|
||||||
|
class="no-scrollbar h-full overflow-y-auto"
|
||||||
>
|
>
|
||||||
{#if groupStore.data?.picture}
|
<a
|
||||||
<img
|
href="/"
|
||||||
src={groupStore.data.picture}
|
class="mt-3 mb-6 flex min-w-0 flex-col hover:opacity-90"
|
||||||
alt={name}
|
aria-label="{name} — home"
|
||||||
class="max-w-[90%] shrink-0 object-cover"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
<span
|
|
||||||
class="mt-2 text-[1.3rem] leading-6 font-medium text-neutral-900 dark:text-neutral-100"
|
|
||||||
>{name}</span
|
|
||||||
>
|
>
|
||||||
</a>
|
{#if groupStore.data?.picture}
|
||||||
|
<img
|
||||||
<a
|
src={groupStore.data.picture}
|
||||||
href="/"
|
alt={name}
|
||||||
class="flex items-center gap-2 py-1 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
|
class="max-w-[90%] shrink-0 object-cover"
|
||||||
>
|
/>
|
||||||
{mode === "simple" ? "Discussions" : "Home"}
|
{/if}
|
||||||
</a>
|
<span
|
||||||
|
class="mt-2 text-[1.3rem] leading-6 font-medium text-neutral-900 dark:text-neutral-100"
|
||||||
{#if SEARCH_ENABLED}
|
>{name}</span
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={openSearch}
|
|
||||||
class="flex w-full items-center gap-2 py-1 text-left text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
Search
|
|
||||||
<kbd
|
|
||||||
class="ml-auto flex h-5 w-5 items-center justify-center rounded bg-neutral-200 font-sans text-xs text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
|
|
||||||
aria-hidden="true">/</kbd
|
|
||||||
>
|
>
|
||||||
</button>
|
</a>
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if mode === "simple"}
|
<a
|
||||||
<div class="mt-6 flex">
|
href="/"
|
||||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
class="flex items-center gap-2 py-1 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
|
||||||
{groupStore.data?.about ?? ""}
|
>
|
||||||
</p>
|
{mode === "simple" ? "Discussions" : "Home"}
|
||||||
</div>
|
</a>
|
||||||
{:else}
|
|
||||||
{#if activeAbout}
|
{#if SEARCH_ENABLED}
|
||||||
<div class="mt-6">
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={openSearch}
|
||||||
|
class="flex w-full items-center gap-2 py-1 text-left text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
<kbd
|
||||||
|
class="ml-auto flex h-5 w-5 items-center justify-center rounded bg-neutral-200 font-sans text-xs text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
|
||||||
|
aria-hidden="true">/</kbd
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if mode === "simple"}
|
||||||
|
<div class="mt-6 flex">
|
||||||
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
|
{groupStore.data?.about ?? ""}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{#if activeAbout}
|
||||||
|
<div class="mt-6">
|
||||||
|
<p
|
||||||
|
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-500"
|
||||||
|
>
|
||||||
|
About
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
|
{activeAbout}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<nav class="mt-6 flex-auto" aria-label="Rooms">
|
||||||
<p
|
<p
|
||||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-500"
|
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-500"
|
||||||
>
|
>
|
||||||
About
|
Rooms
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
{#if groupsStore.list.length === 0 && !groupsStore.loaded}
|
||||||
{activeAbout}
|
<p class="py-1 text-sm text-neutral-400 dark:text-neutral-500">
|
||||||
</p>
|
Loading rooms…
|
||||||
</div>
|
</p>
|
||||||
|
{/if}
|
||||||
|
{#each groupsStore.list as room}
|
||||||
|
<a
|
||||||
|
href="/room/{room.id}"
|
||||||
|
class="flex items-center gap-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-800
|
||||||
|
{activeRoom === room.id
|
||||||
|
? ' text-accent'
|
||||||
|
: 'text-neutral-700 dark:text-neutral-300'}"
|
||||||
|
>
|
||||||
|
{room.name}
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</nav>
|
||||||
{/if}
|
{/if}
|
||||||
<nav class="mt-6 flex-auto" aria-label="Rooms">
|
|
||||||
|
<nav class="mt-6 flex-auto" aria-label="Resources">
|
||||||
<p
|
<p
|
||||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-500"
|
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-500"
|
||||||
>
|
>
|
||||||
Rooms
|
Resources
|
||||||
</p>
|
</p>
|
||||||
{#if groupsStore.list.length === 0 && !groupsStore.loaded}
|
{#each resourcesStore.list as r (r.slug)}
|
||||||
<p class="py-1 text-sm text-neutral-400 dark:text-neutral-500">
|
|
||||||
Loading rooms…
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
{#each groupsStore.list as room}
|
|
||||||
<a
|
<a
|
||||||
href="/room/{room.id}"
|
href="/resource/{r.slug}"
|
||||||
class="flex items-center gap-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-800
|
aria-current={activeResource === r.slug ? "page" : undefined}
|
||||||
{activeRoom === room.id
|
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
|
||||||
? ' text-accent'
|
|
||||||
: 'text-neutral-700 dark:text-neutral-300'}"
|
|
||||||
>
|
|
||||||
{room.name}
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</nav>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<nav class="mt-6 flex-auto" aria-label="Resources">
|
|
||||||
<p
|
|
||||||
class="pb-1 text-xs font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-500"
|
|
||||||
>
|
|
||||||
Resources
|
|
||||||
</p>
|
|
||||||
{#each resourcesStore.list as r (r.slug)}
|
|
||||||
<a
|
|
||||||
href="/resource/{r.slug}"
|
|
||||||
aria-current={activeResource === r.slug ? "page" : undefined}
|
|
||||||
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
|
|
||||||
{activeResource === r.slug
|
{activeResource === r.slug
|
||||||
? 'text-accent'
|
? 'text-accent'
|
||||||
: 'text-neutral-500 dark:text-neutral-400'}">{r.title}</a
|
: 'text-neutral-500 dark:text-neutral-400'}">{r.title}</a
|
||||||
>
|
>
|
||||||
{/each}
|
{/each}
|
||||||
<a
|
<a
|
||||||
href="/contacts"
|
href="/contacts"
|
||||||
aria-current={contactsActive ? "page" : undefined}
|
aria-current={contactsActive ? "page" : undefined}
|
||||||
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
|
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
|
||||||
{contactsActive
|
{contactsActive
|
||||||
? 'text-accent'
|
? 'text-accent'
|
||||||
: 'text-neutral-500 dark:text-neutral-400'}">Contacts</a
|
: 'text-neutral-500 dark:text-neutral-400'}">Contacts</a
|
||||||
>
|
>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-b from-transparent to-neutral-100 transition-opacity dark:to-neutral-800 {moreBelow
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0'}"
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue