feat: better sidebar control (#166)

Author: jrasm91

package.json

@@ -68,5 +68,8 @@
 		"bits-ui": "^1.0.0-next.46",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.3.0"
+	},
+	"volta": {
+		"node": "22.15.0"
 	}
 }

src/docs/components/Navbar.svelte

@@ -1,17 +1,29 @@
 <script lang="ts">
-	import { Logo, Theme } from '@immich/ui';
+	import { IconButton, Logo, Theme } from '@immich/ui';
+	import { mdiMenu } from '@mdi/js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
 		theme?: Theme;
 		children?: Snippet;
+		onToggleSidebar?: () => void;
 	};
 
-	const { children, theme = Theme.Dark }: Props = $props();
+	const { children, theme = Theme.Dark, onToggleSidebar }: Props = $props();
 </script>
 
-<nav class="{theme} flex items-center justify-between gap-2 p-2">
-	<a href="/" class="flex gap-2 text-4xl">
+<nav class="{theme} flex items-center gap-2 p-2">
+	<IconButton
+		shape="round"
+		color="secondary"
+		variant="ghost"
+		size="medium"
+		aria-label="Main menu"
+		icon={mdiMenu}
+		onclick={() => onToggleSidebar?.()}
+		class="md:hidden"
+	/>
+	<a href="/" class="flex grow gap-2 text-4xl">
 		<Logo variant="inline" />
 	</a>
 	{@render children?.()}

src/lib/components/AppShell/AppShellSidebar.svelte

@@ -1,48 +1,25 @@
 <script lang="ts">
-	import { afterNavigate } from '$app/navigation';
-	import IconButton from '$lib/components/IconButton/IconButton.svelte';
 	import Scrollable from '$lib/components/Scrollable/Scrollable.svelte';
 	import { ChildKey } from '$lib/constants.js';
 	import Child from '$lib/internal/Child.svelte';
 	import { cleanClass } from '$lib/utils.js';
-	import { mdiClose, mdiMenu } from '@mdi/js';
-	import type { Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 
 	type Props = {
 		class?: string;
 		children: Snippet;
-		noBorder?: boolean;
+		open?: boolean;
 	};
 
-	let { class: className, children, noBorder = false }: Props = $props();
-
-	afterNavigate(() => {
-		if (!hidden) {
-			hidden = true;
-		}
-	});
-
-	let hidden = $state(true);
+	let { class: className, children, open = $bindable(true) }: Props = $props();
 </script>
 
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
-	<IconButton
-		size="giant"
-		onclick={() => (hidden = !hidden)}
-		icon={hidden ? mdiMenu : mdiClose}
-		shape="round"
-		color={hidden ? 'primary' : 'secondary'}
-		variant="filled"
-		class="absolute bottom-2 end-4 m-2 opacity-100 md:hidden"
-		aria-label="Menu"
-	/>
 	<Scrollable
 		class={cleanClass(
-			'h-dvh w-full shrink-0 bg-light pb-16 text-dark md:relative md:block md:w-min md:pb-0',
-
-			hidden ? 'hidden' : '',
+			'relative shrink-0 bg-light text-dark transition-all duration-200',
+			open ? 'w-[min(100vw,16rem)]' : 'w-[0px]',
 			className,
-			noBorder || 'border-e',
 		)}
 	>
 		{@render children?.()}

src/lib/components/Form/PasswordInput.svelte

@@ -23,7 +23,7 @@
 				shape="round"
 				color="secondary"
 				{size}
-				class="mr-1"
+				class="me-1"
 				icon={isVisible ? mdiEyeOffOutline : mdiEyeOutline}
 				onclick={() => (isVisible = !isVisible)}
 				title={isVisible ? t('hidePassword', translations) : t('showPassword', translations)}

src/lib/components/Navbar/NavbarItem.svelte

@@ -12,7 +12,7 @@
 		isActive?: () => boolean;
 	} & { icon?: string & Omit<IconProps, 'icon'> };
 
-	const matchesPath = () => page.url.pathname === href;
+	const startsWithHref = () => page.url.pathname.startsWith(href);
 
 	let {
 		href,
@@ -23,11 +23,11 @@
 		...iconProps
 	}: Props = $props();
 
-	const isActive = isActiveOverride ?? matchesPath;
+	const isActive = isActiveOverride ?? startsWithHref;
 	let active = $derived(activeOverride ?? isActive());
 
 	const styles = tv({
-		base: 'flex w-full place-items-center gap-4 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:rounded-e-full md:px-5',
+		base: 'flex w-full place-items-center gap-4 rounded-e-full px-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',

src/lib/utils.ts

@@ -1,13 +1,17 @@
+import { twMerge } from 'tailwind-merge';
+
 export const cleanClass = (...classNames: unknown[]) => {
-	return classNames
-		.filter((className) => {
-			if (!className || typeof className === 'boolean') {
-				return false;
-			}
+	return twMerge(
+		classNames
+			.filter((className) => {
+				if (!className || typeof className === 'boolean') {
+					return false;
+				}
 
-			return typeof className === 'string';
-		})
-		.join(' ');
+				return typeof className === 'string';
+			})
+			.join(' '),
+	);
 };
 
 export const withPrefix = (key: string) => `immich-ui-${key}`;

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { beforeNavigate } from '$app/navigation';
 	import Footer from '$docs/components/Footer.svelte';
 	import Navbar from '$docs/components/Navbar.svelte';
 	import { componentGroups } from '$docs/constants.js';
@@ -14,22 +15,32 @@
 		ThemeSwitcher,
 	} from '@immich/ui';
 	import { mdiHome } from '@mdi/js';
+	import { MediaQuery } from 'svelte/reactivity';
 	import '../app.css';
 
 	initializeTheme();
 
 	let { children } = $props();
+
+	const sidebar = new MediaQuery(`min-width: 850px`);
+	let open = $derived(sidebar.current);
+
+	beforeNavigate(() => {
+		if (!sidebar.current) {
+			open = false;
+		}
+	});
 </script>
 
 <AppShell>
 	<AppShellHeader>
-		<Navbar theme={theme.value}>
-			<ThemeSwitcher size="giant" />
+		<Navbar theme={theme.value} onToggleSidebar={() => (open = !open)}>
+			<ThemeSwitcher size="medium" />
 		</Navbar>
 	</AppShellHeader>
 
-	<AppShellSidebar class="min-w-[250px]">
-		<div class="mr-0 mt-4 md:mr-4">
+	<AppShellSidebar bind:open>
+		<div class="my-4 me-4">
 			<NavbarItem title="Home" icon={mdiHome} href="/" />
 			{#each componentGroups as group}
 				<NavbarGroup title={group.title} />

src/routes/components/app-shell/BasicExample.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Button from '$lib/internal/Button.svelte';
 	import {
 		AppShell,
 		AppShellHeader,
@@ -8,6 +9,8 @@
 		Stack,
 	} from '@immich/ui';
 	import { mdiHome } from '@mdi/js';
+
+	let open = $state(true);
 </script>
 
 <Stack>
@@ -53,7 +56,7 @@
 				</div>
 			</AppShellHeader>
 
-			<AppShellSidebar noBorder class="pt-2">
+			<AppShellSidebar class="pt-2" bind:open>
 				<Stack>
 					<NavbarItem icon={mdiHome} title="Home" href="/" active />
 					<NavbarItem icon={mdiHome} title="Item 1" href="#" />
@@ -63,7 +66,7 @@
 			</AppShellSidebar>
 
 			<div class="p-4">
-				<Heading size="tiny">Content</Heading>
+				<Button onclick={() => (open = !open)}>Toggle Sidebar</Button>
 			</div>
 		</AppShell>
 	</div>