fix: better is active detection (#93)

immich-app · Jan 22, 2025 · 7601197 · 7601197
1 parent 44b69dc
commit 7601197
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/src/lib/components/Navbar/NavbarItem.svelte b/src/lib/components/Navbar/NavbarItem.svelte
@@ -12,7 +12,7 @@
 		isActive?: () => boolean;
 	} & { icon?: string & Omit<IconProps, 'icon'> };
 
-	const startsWithHref = () => page.url.pathname.startsWith(href);
+	const matchesPath = () => page.url.pathname === href;
 
 	let {
 		href,
@@ -23,7 +23,7 @@
 		...iconProps
 	}: Props = $props();
 
-	const isActive = isActiveOverride ?? startsWithHref;
+	const isActive = isActiveOverride ?? matchesPath;
 	let active = $derived(activeOverride ?? isActive());
 
 	const styles = tv({

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -43,18 +43,20 @@
 		</Navbar>
 	</AppShellHeader>
 
-	<AppShellSidebar class="min-w-[225px]">
-		<NavbarItem title="Home" icon={mdiHome} href="/" />
-		{#each componentGroups as group}
-			<NavbarGroup title={group.title} />
-			{#each group.components as component}
-				<NavbarItem
-					href={asComponentHref(component.name)}
-					title={component.name}
-					icon={component.icon}
-				/>
+	<AppShellSidebar class="min-w-[250px]">
+		<div class="mr-0 mt-4 md:mr-4">
+			<NavbarItem title="Home" icon={mdiHome} href="/" />
+			{#each componentGroups as group}
+				<NavbarGroup title={group.title} />
+				{#each group.components as component}
+					<NavbarItem
+						href={asComponentHref(component.name)}
+						title={component.name}
+						icon={component.icon}
+					/>
+				{/each}
 			{/each}
-		{/each}
+		</div>
 	</AppShellSidebar>
 
 	<section class="flex h-full flex-col">

diff --git a/src/routes/components/heading/SizeExample.svelte b/src/routes/components/heading/SizeExample.svelte
@@ -8,4 +8,5 @@
 	<Heading size="medium">Heading</Heading>
 	<Heading size="large">Heading</Heading>
 	<Heading size="giant">Heading</Heading>
+	<Heading size="title">Heading</Heading>
 </Stack>