From 869d91db3b3a254aae25b1647a805e4d99dfc9f1 Mon Sep 17 00:00:00 2001
From: jonathan <github.com.starship007@passmail.net>
Date: Thu, 26 Mar 2026 17:46:19 +0100
Subject: [PATCH 1/2] fix broken classn name

---
 src/lib/components/theme-change.svelte | 32 ++++++++++++++------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/theme-change.svelte b/src/lib/components/theme-change.svelte
index a2329e5..451cd1d 100644
--- a/src/lib/components/theme-change.svelte
+++ b/src/lib/components/theme-change.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { themeChange } from 'theme-change';
 
-	import { textVariants } from './text';
-
 	import { cn } from '$lib/utils/cn';
 
-	type ThemeChangeProps = {
+	type ThemeChangeProps = HTMLAttributes<HTMLDivElement> & {
 		variant?: 'dropdown' | 'select';
 	};
 
-	let { variant = 'dropdown' }: ThemeChangeProps = $props();
+	let { variant = 'dropdown', class: klass, ...props }: ThemeChangeProps = $props();
 
 	const themes = [
 		'vscode',
@@ -37,8 +36,15 @@
 	});
 </script>
 
-{#if variant === 'dropdown'}
-	<div class="dropdown dropdown-end ml-auto">
+<div
+	class={cn(
+		variant === 'dropdown' && 'dropdown dropdown-end',
+		variant === 'select' && 'flex flex-col items-start',
+		klass
+	)}
+	{...props}
+>
+	{#if variant === 'dropdown'}
 		<div tabindex="0" role="button" class="btn gap-1 btn-ghost btn-sm">
 			<i class="nf nf-md-theme_light_dark"></i>
 			<svg
@@ -69,22 +75,18 @@
 				</li>
 			{/each}
 		</ul>
-	</div>
-{:else}
-	<div class="flex flex-col items-start">
-		<label for="theme-select" class={cn(textVariants.base, textVariants.size.xs)}
-			>Select Theme</label
-		>
+	{:else}
+		<label for="theme-select" class="sr-only">Select Theme</label>
 		<select id="theme-select" class="select appearance-none" aria-label="Select Theme">
 			{#each themes as theme (theme)}
 				<option
 					data-set-theme={theme}
 					data-act-class="btn-active"
-					class="theme-controlle"
+					class="theme-controller"
 					aria-label={theme}
 					value={theme}>{theme}</option
 				>
 			{/each}
 		</select>
-	</div>
-{/if}
+	{/if}
+</div>

From 368e1874d2407570cef1b00bdfdb045cc87bbc31 Mon Sep 17 00:00:00 2001
From: jonathan <github.com.starship007@passmail.net>
Date: Thu, 26 Mar 2026 17:46:24 +0100
Subject: [PATCH 2/2] refactor navbar

---
 src/lib/components/navbar.svelte | 53 ++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index ccc6702..b6fe558 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -6,6 +6,21 @@
 	import ThemeChange from '$lib/components/theme-change.svelte';
 
 	const DRAWER_ID = 'navbar-drawer';
+
+	let drawer: HTMLInputElement | undefined;
+
+	function toggleDrawer() {
+		const drawer = document.getElementById(DRAWER_ID) as HTMLInputElement;
+		if (drawer) {
+			drawer.checked = !drawer.checked;
+		}
+	}
+
+	let navItems = [
+		{ href: resolve('/privacy-news'), label: 'Privacy News' },
+		{ href: resolve('/awesome-privacy'), label: 'Awesome Privacy' },
+		{ href: resolve('/websites'), label: 'Websites' }
+	];
 </script>
 
 <nav class="navbar flex-col justify-center gap-y-2 bg-base-100 px-4 shadow-sm">
@@ -22,37 +37,37 @@
 			<ul
 				class="flex md:px-6 [&_a]:btn [&_a]:font-semibold [&_a]:btn-link [&_a]:no-underline [&_a]:hover:underline"
 			>
-				<li><Link href={resolve('/privacy-news')}>Privacy News</Link></li>
-				<li><Link href={resolve('/awesome-privacy')}>Awesome Privacy</Link></li>
-				<li><Link href={resolve('/websites')}>Websites</Link></li>
+				{#each navItems as navItem (navItem.href)}
+					<li><Link href={navItem.href}>{navItem.label}</Link></li>
+				{/each}
 			</ul>
 		</div>
 
-		<!-- mobile nav items  -->
+		<!-- mobile drawer -->
 		<div class="drawer drawer-end ml-auto w-fit sm:hidden">
-			<input id={DRAWER_ID} type="checkbox" class="drawer-toggle" />
+			<input bind:this={drawer} id={DRAWER_ID} type="checkbox" class="drawer-toggle" />
 			<div class="drawer-content">
-				<label for={DRAWER_ID} class="drawer-button btn btn-square btn-ghost">
+				<label for={DRAWER_ID} class="drawer-button btn btn-square text-base-content/50 btn-ghost">
 					<i class="nf nf-md-menu text-lg"></i>
 				</label>
 			</div>
 			<div class="drawer-side">
-				<label for={DRAWER_ID} aria-label="close sidebar" class="drawer-overlay"></label>
-				<ul class="menu min-h-full w-80 bg-base-200 p-4">
-					<!-- Sidebar content here -->
-					<li><Link href={resolve('/privacy-news')}>Privacy News</Link></li>
-					<li><Link href={resolve('/awesome-privacy')}>Awesome Privacy</Link></li>
-					<li><Link href={resolve('/websites')}>Websites</Link></li>
-					<li class="mt-auto">
-						<ThemeChange variant="select" />
-					</li>
-				</ul>
+				<label for={DRAWER_ID} aria-label="close drawer" class="drawer-overlay"></label>
+
+				<div class="flex min-h-full w-80 flex-col bg-base-200 p-4 *:w-full">
+					<ul class="menu p-0">
+						{#each navItems as navItem (navItem.href)}
+							<li><Link href={navItem.href} onclick={toggleDrawer}>{navItem.label}</Link></li>
+						{/each}
+					</ul>
+
+					<div class="divider mt-auto"></div>
+					<ThemeChange variant="select" class=" w-full " />
+				</div>
 			</div>
 		</div>
 
 		<!-- theme toggle -->
-		<div class="hidden sm:block">
-			<ThemeChange variant="dropdown" />
-		</div>
+		<ThemeChange variant="dropdown" class="hidden sm:block" />
 	</div>
 </nav>