update sidebar to use regex

frontend/package.json

@@ -47,6 +47,7 @@
     "formsnap": "^1.0.0",
     "he": "^1.2.0",
     "lucide-svelte": "^0.356.0",
+    "magic-regexp": "^0.8.0",
     "mode-watcher": "^0.1.2",
     "nanoid": "^5.0.3",
     "node-html-parser": "^6.1.12",

frontend/src/lib/components/sidebar.svelte

@@ -2,15 +2,38 @@
 	import { page } from '$app/stores'
 	import { Button } from '$lib/components/ui/button'
 	import { cn } from '$lib/utils'
+	import { createRegExp, exactly, word } from 'magic-regexp'
 
 	let className: string | undefined = undefined
 	export { className as class }
 
 	const routes = [
-		{ href: '/', name: 'Home' },
-		{ href: '/links', name: 'Links' },
-		{ href: '/projects', name: 'Projects' },
-		{ href: '/settings/account', name: 'Settings' },
+		{
+			href: '/',
+			name: 'Home',
+			regex: createRegExp(exactly('/').notBefore(word)),
+		},
+		{
+			href: '/links',
+			name: 'Links',
+			regex: createRegExp(
+				exactly('/links').or(exactly('/links/').before(word)),
+			),
+		},
+		{
+			href: '/projects',
+			name: 'Projects',
+			regex: createRegExp(
+				exactly('/projects').or(exactly('/projects/').before(word)),
+			),
+		},
+		{
+			href: '/settings/account',
+			name: 'Settings',
+			regex: createRegExp(
+				exactly('/settings').or(exactly('/settings/').before(word)),
+			),
+		},
 	] as const
 </script>
 
@@ -23,7 +46,7 @@
 		<div class="flex flex-col gap-4 p-4">
 			{#each routes as route}
 				<Button
-					variant={$page.url.pathname == route.href
+					variant={route.regex.test($page.url.pathname)
 						? 'secondary'
 						: 'ghost'}
 					href={route.href}

frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte

@@ -3,8 +3,18 @@
 	import { page } from '$app/stores'
 	import { Button } from '$lib/components/ui/button'
 	let className: string | undefined | null = undefined
-	export let items: { href: string; title: string }[]
 	export { className as class }
+
+	const items = [
+		{
+			title: 'Account',
+			href: '/settings/account',
+		},
+		{
+			title: 'QR',
+			href: '/settings/qr',
+		},
+	] as const
 </script>
 
 <nav

frontend/src/routes/(app)/settings/+layout.svelte

@@ -2,39 +2,26 @@
 	import { ScrollArea } from '$lib/components/ui/scroll-area'
 	import { Separator } from '$lib/components/ui/separator'
 	import SidebarNav from './(components)/sidebar-nav.svelte'
-
-	const sidebarNavItems = [
-		{
-			title: 'Account',
-			href: '/settings/account',
-		},
-		{
-			title: 'QR',
-			href: '/settings/qr',
-		},
-	]
 </script>
 
 <svelte:head>
 	<title>Settings</title>
 </svelte:head>
 
-<div class="flex h-auto flex-col overflow-hidden p-10">
+<div class="flex overflow-hidden flex-col p-10 h-auto">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
-		<p class="text-muted-foreground">
-			Manage your account settings and set e-mail preferences.
-		</p>
+		<p class="text-muted-foreground">Manage your account settings.</p>
 	</div>
 	<Separator class="my-4 lg:my-6" />
-	<div class="flex h-auto flex-col overflow-hidden lg:flex-row">
-		<aside class="border-b pb-4 lg:w-1/5 lg:border-none">
-			<SidebarNav items={sidebarNavItems} />
+	<div class="flex overflow-hidden flex-col h-auto lg:flex-row">
+		<aside class="pb-4 border-b lg:w-1/5 lg:border-none">
+			<SidebarNav />
 		</aside>
 		<div
-			class="m-0 flex h-auto w-full overflow-hidden p-0 lg:max-w-2xl">
+			class="flex overflow-hidden p-0 m-0 w-full h-auto lg:max-w-2xl">
 			<ScrollArea class="mt-0 w-full">
-				<div class="py-6 lg:px-8 lg:py-0">
+				<div class="py-6 lg:py-0 lg:px-8">
 					<slot />
 				</div>
 			</ScrollArea>