feat: redesigned sidebar with administrative dropdown (#881)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/messages/en.json

@@ -441,5 +441,7 @@
 	"last_signed_in_ago": "Last signed in {time} ago",
 	"invalid_client_id": "Client ID can only contain letters, numbers, underscores, and hyphens",
 	"custom_client_id_description": "Set a custom client ID if this is required by your application. Otherwise, leave it blank to generate a random one.",
-	"generated": "Generated"
+	"generated": "Generated",
+  "administration": "Administration"
+
 }

frontend/package.json

@@ -21,6 +21,7 @@
 		"date-fns": "^4.1.0",
 		"jose": "^5.10.0",
 		"qrcode": "^1.5.4",
+    "runed": "^0.31.1",
 		"sveltekit-superforms": "^2.27.1",
 		"tailwind-merge": "^3.3.1",
 		"zod": "^4.0.9"

frontend/src/lib/components/header/header-avatar.svelte

@@ -6,7 +6,7 @@
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import userStore from '$lib/stores/user-store';
 	import { cachedProfilePicture } from '$lib/utils/cached-image-util';
-	import { LayoutDashboard, LucideLogOut, LucideUser } from '@lucide/svelte';
+	import { LucideLogOut, LucideUser } from '@lucide/svelte';
 
 	const webauthnService = new WebAuthnService();
 
@@ -34,9 +34,6 @@
 		</DropdownMenu.Label>
 		<DropdownMenu.Separator />
 		<DropdownMenu.Group>
-			<DropdownMenu.Item onclick={() => goto('/settings/apps')}
-				><LayoutDashboard class="mr-2 size-4" /> {m.my_apps()}</DropdownMenu.Item
-			>
 			<DropdownMenu.Item onclick={() => goto('/settings/account')}
 				><LucideUser class="mr-2 size-4" /> {m.my_account()}</DropdownMenu.Item
 			>

frontend/src/lib/components/sidebar.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { m } from '$lib/paraglide/messages';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import { cn } from '$lib/utils/style';
+	import { LucideChevronDown, LucideExternalLink } from '@lucide/svelte';
+	import { PersistedState } from 'runed';
+	import { slide } from 'svelte/transition';
+
+	type NavItem = {
+		href?: string;
+		label: string;
+		children?: NavItem[];
+	};
+
+	let {
+		items = [] as NavItem[],
+		storageKey = 'sidebar-open:settings',
+		isAdmin = false,
+		isUpToDate = undefined
+	} = $props();
+
+	const openState = new PersistedState<Record<string, boolean>>(storageKey, {});
+
+	function groupId(item: NavItem, idx: number) {
+		return `${item.label}-${idx}`;
+	}
+
+	function isActive(href?: string) {
+		if (!href) return false;
+		return page.url.pathname.startsWith(href);
+	}
+
+	$effect(() => {
+		const state = openState.current;
+		items.forEach((item, idx) => {
+			if (!item.children?.length) return;
+			const id = groupId(item, idx);
+			if (state[id] === undefined) {
+				state[id] = item.children.some((c) => isActive(c.href));
+			}
+		});
+	});
+
+	function isOpen(id: string) {
+		return !!openState.current[id];
+	}
+	function toggle(id: string) {
+		openState.current[id] = !openState.current[id];
+	}
+
+	const activeClasses =
+		'text-primary bg-card rounded-md px-3 py-1.5 font-medium shadow-sm transition-all';
+	const inactiveClasses =
+		'hover:text-foreground hover:bg-muted/70 rounded-md px-3 py-1.5 transition-all hover:-translate-y-[2px] hover:shadow-sm';
+
+	const ROW_STAGGER = 50;
+
+	// Derive the offset (row index) for each top-level item,
+	// counting expanded children of previous items.
+	const layout = $derived(() => {
+		const offsets: number[] = [];
+		let total = 0;
+		items.forEach((it, idx) => {
+			offsets[idx] = total; // row index for this top-level item
+			total += 1; // this item itself
+			const id = groupId(it, idx);
+			if (it.children?.length && openState.current[id]) {
+				total += it.children.length; // rows for visible children
+			}
+		});
+		return { offsets, total };
+	});
+
+	const delayTop = (i: number) => `${layout().offsets[i] * ROW_STAGGER}ms`;
+	const delayChild = (i: number, j: number) => `${(layout().offsets[i] + 1 + j) * ROW_STAGGER}ms`;
+	const delayUpdateLink = () => `${layout().total * ROW_STAGGER}ms`;
+</script>
+
+<nav class="text-muted-foreground grid gap-2 text-sm">
+	{#each items as item, i}
+		{#if item.children?.length}
+			{@const id = groupId(item, i)}
+			<div class="group">
+				<button
+					type="button"
+					class={cn(
+						'hover:bg-muted/70 hover:text-foreground flex w-full items-center justify-between rounded-md px-3 py-1.5 text-left transition-all',
+						!$appConfigStore.disableAnimations && 'animate-fade-in'
+					)}
+					style={`animation-delay: ${delayTop(i)};`}
+					aria-expanded={isOpen(id)}
+					aria-controls={`submenu-${id}`}
+					onclick={() => toggle(id)}
+				>
+					{item.label}
+
+					<LucideChevronDown
+						class={cn('size-4 transition-transform', isOpen(id) ? 'rotate-180' : '')}
+					/>
+				</button>
+
+				{#if isOpen(id)}
+					<ul
+						id={`submenu-${id}`}
+						class="border-border/50 ml-2 border-l pl-2"
+						transition:slide|local={{ duration: 120 }}
+					>
+						{#each item.children as child, j}
+							<li>
+								<a
+									href={child.href}
+									class={cn(
+										isActive(child.href) ? activeClasses : inactiveClasses,
+										'my-1 block',
+										!$appConfigStore.disableAnimations && 'animate-fade-in'
+									)}
+									style={`animation-delay: ${delayChild(i, j)};`}
+								>
+									{child.label}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+		{:else}
+			<a
+				href={item.href}
+				class={cn(
+					isActive(item.href) ? activeClasses : inactiveClasses,
+					!$appConfigStore.disableAnimations && 'animate-fade-in'
+				)}
+				style={`animation-delay: ${delayTop(i)};`}
+			>
+				{item.label}
+			</a>
+		{/if}
+	{/each}
+
+	{#if isAdmin && isUpToDate === false}
+		<a
+			href="https://github.com/pocket-id/pocket-id/releases/latest"
+			target="_blank"
+			rel="noopener noreferrer"
+			class={cn(
+				inactiveClasses,
+				'flex items-center gap-2 text-orange-500 hover:text-orange-500/90',
+				!$appConfigStore.disableAnimations && 'animate-fade-in'
+			)}
+			style={`animation-delay: ${delayUpdateLink()};`}
+		>
+			{m.update_pocket_id()}
+			<LucideExternalLink class="my-auto inline-block size-3" />
+		</a>
+	{/if}
+</nav>

frontend/src/routes/settings/+layout.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { page } from '$app/state';
 	import FadeWrapper from '$lib/components/fade-wrapper.svelte';
 	import { m } from '$lib/paraglide/messages';
-	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
-	import { cn } from '$lib/utils/style';
-	import { LucideExternalLink, LucideSettings } from '@lucide/svelte';
+	import Sidebar from '$lib/components/sidebar.svelte';
+	import { LucideSettings } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 	import type { LayoutData } from './$types';
@@ -20,14 +18,19 @@
 
 	const { versionInformation, user } = data;
 
-	const links = [
+	type NavItem = {
+		href?: string;
+		label: string;
+		children?: NavItem[];
+	};
+
+	const items: NavItem[] = [
 		{ href: '/settings/account', label: m.my_account() },
+		{ href: '/settings/apps', label: m.my_apps() },
 		{ href: '/settings/audit-log', label: m.audit_log() }
 	];
 
-	const nonAdminLinks = [{ href: '/settings/apps', label: m.my_apps() }];
-
-	const adminLinks = [
+	const adminChildren: NavItem[] = [
 		{ href: '/settings/admin/users', label: m.users() },
 		{ href: '/settings/admin/user-groups', label: m.user_groups() },
 		{ href: '/settings/admin/oidc-clients', label: m.oidc_clients() },
@@ -36,9 +39,7 @@
 	];
 
 	if (user?.isAdmin || $userStore?.isAdmin) {
-		links.push(...adminLinks);
-	} else {
-		links.push(...nonAdminLinks);
+		items.push({ label: m.administration(), children: adminChildren });
 	}
 </script>
 
@@ -58,35 +59,16 @@
 							{m.settings()}
 						</h1>
 					</div>
-					<nav class="text-muted-foreground grid gap-2 text-sm">
-						{#each links as { href, label }, i}
-							<a
-								{href}
-								class={cn(
-									!$appConfigStore.disableAnimations && 'animate-fade-in',
-									page.url.pathname.startsWith(href)
-										? 'text-primary bg-card rounded-md px-3 py-1.5 font-medium shadow-sm transition-all'
-										: 'hover:text-foreground hover:bg-muted/70 rounded-md px-3 py-1.5 transition-all hover:-translate-y-[2px] hover:shadow-sm'
-								)}
-								style={`animation-delay: ${150 + i * 50}ms;`}
-							>
-								{label}
-							</a>
-						{/each}
-						{#if $userStore?.isAdmin && versionInformation.isUpToDate === false}
-							<a
-								href="https://github.com/pocket-id/pocket-id/releases/latest"
-								target="_blank"
-								class="animate-fade-in hover:text-foreground hover:bg-muted/70 mt-1 flex items-center gap-2 rounded-md px-3 py-1.5 text-orange-500 transition-all hover:-translate-y-[2px] hover:shadow-sm"
-								style={`animation-delay: ${150 + links.length * 75}ms;`}
-							>
-								{m.update_pocket_id()}
-								<LucideExternalLink class="my-auto inline-block size-3" />
-							</a>
-						{/if}
-					</nav>
+
+					<Sidebar
+						{items}
+						storageKey="sidebar-open:settings"
+						isAdmin={$userStore?.isAdmin || user?.isAdmin}
+						isUpToDate={versionInformation?.isUpToDate}
+					/>
 				</div>
 			</div>
+
 			<div class="flex w-full flex-col gap-4 overflow-hidden">
 				<FadeWrapper>
 					{@render children()}

pnpm-lock.yaml

@@ -34,6 +34,9 @@ importers:
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
+      runed:
+        specifier: ^0.31.1
+        version: 0.31.1(svelte@5.36.17)
       sveltekit-superforms:
         specifier: ^2.27.1
         version: 2.27.1(@sveltejs/kit@2.36.3(@sveltejs/vite-plugin-svelte@6.1.0(svelte@5.36.17)(vite@7.0.6(@types/node@22.16.5)(jiti@2.5.1)(lightningcss@1.30.1)))(svelte@5.36.17)(vite@7.0.6(@types/node@22.16.5)(jiti@2.5.1)(lightningcss@1.30.1)))(@types/json-schema@7.0.15)(esbuild@0.25.8)(svelte@5.36.17)(typescript@5.8.3)
@@ -1807,6 +1810,11 @@ packages:
     peerDependencies:
       svelte: ^5.7.0
 
+  runed@0.31.1:
+    resolution: {integrity: sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ==}
+    peerDependencies:
+      svelte: ^5.7.0
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -3637,6 +3645,11 @@ snapshots:
       esm-env: 1.2.2
       svelte: 5.36.17
 
+  runed@0.31.1(svelte@5.36.17):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.36.17
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0