refactor: better navbar

Author: 0x2E

frontend/src/lib/components/Navbar.svelte

@@ -3,11 +3,13 @@
 	import { Button } from '$lib/components/ui/button';
 	import { MenuIcon, XIcon } from 'lucide-svelte';
 	import ThemeToggler from './ThemeToggler.svelte';
+
 	interface link {
 		label: string;
 		url: string;
 		highlight?: boolean;
 	}
+
 	let links: link[] = [
 		{ label: 'Unread', url: '/' },
 		{ label: 'Bookmark', url: '/bookmarks' },
@@ -30,14 +32,22 @@
 		links = links;
 	}
 	let showMenu = false;
+	$: disableBodyScoll(showMenu);
+
+	let bodyOverflowDefault = document.body.style.overflow;
+	function disableBodyScoll(showMenu: boolean) {
+		document.body.style.overflow = showMenu ? 'hidden' : bodyOverflowDefault;
+	}
 </script>
 
 <nav class="block w-full sm:mt-3 mb-6">
 	<div class="flex flex-col items-center w-full sm:max-w-[500px] sm:mx-auto bg-background">
 		<div
-			class="flex justify-between sm:justify-around w-full px-4 sm:px-6 py-2 sm:py-4 sm:rounded-2xl shadow-md sm:border"
+			class="flex justify-between sm:justify-around w-full px-4 sm:px-6 py-2 sm:py-4 sm:rounded-2xl shadow sm:border"
 		>
-			<img src="/icon-96.png" alt="icon" class="w-10" />
+			<a href="/">
+				<img src="/icon-96.png" alt="icon" class="w-10" />
+			</a>
 			<div class="hidden sm:block">
 				{#each links as l}
 					<Button
@@ -64,22 +74,22 @@
 			</Button>
 		</div>
 
-		<div class="sm:hidden relative w-full z-[9999]">
-			{#if showMenu}
-				<div class="flex flex-col w-full absolute top-0 bg-background shadow-md">
-					{#each links as l}
-						<Button
-							variant="ghost"
-							href={l.url}
-							on:click={() => (showMenu = false)}
-							class="w-full {l.highlight ? 'bg-accent text-accent-foreground' : ''}"
-						>
-							{l.label}
-						</Button>
-					{/each}
-					<ThemeToggler className="w-full" />
-				</div>
-			{/if}
+		<div
+			class={`${showMenu ? 'opacity-100 visible' : 'opacity-0 invisible'} sm:hidden w-full h-screen z-50 fixed top-0 pt-14 pointer-events-none transition-all duration-300 origin-center overflow-y-auto`}
+		>
+			<div class="flex flex-col w-full h-full bg-background pointer-events-auto pt-6">
+				{#each links as l}
+					<Button
+						variant="ghost"
+						href={l.url}
+						on:click={() => (showMenu = false)}
+						class={`w-full text-lg h-14 ${l.highlight ? 'bg-accent text-accent-foreground' : ''}`}
+					>
+						{l.label}
+					</Button>
+				{/each}
+				<ThemeToggler className="w-full h-14" />
+			</div>
 		</div>
 	</div>
 </nav>