refactor: responsive navbar

Author: 0x2E

frontend/package-lock.json

@@ -18,7 +18,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@tailwindcss/typography": "^0.5.12",
 		"@types/eslint": "^8.56.7",
-		"@types/node": "^20.12.3",
+		"@types/node": "^20.12.5",
 		"@typescript-eslint/eslint-plugin": "^7.5.0",
 		"@typescript-eslint/parser": "^7.5.0",
 		"autoprefixer": "^10.4.19",
@@ -32,8 +32,8 @@
 		"svelte-check": "^3.6.9",
 		"tailwindcss": "^3.4.3",
 		"tslib": "^2.6.2",
-		"typescript": "^5.4.3",
-		"vite": "^5.2.7"
+		"typescript": "^5.4.4",
+		"vite": "^5.2.8"
 	},
 	"type": "module",
 	"dependencies": {
@@ -43,7 +43,7 @@
 		"cmdk-sv": "^0.0.17",
 		"dompurify": "^3.0.11",
 		"ky": "^1.2.3",
-		"lucide-svelte": "^0.364.0",
+		"lucide-svelte": "^0.365.0",
 		"mode-watcher": "^0.3.0",
 		"moment": "^2.30.1",
 		"svelte-sonner": "^0.3.21",

frontend/package.json

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { Button } from '$lib/components/ui/button';
+	import { MenuIcon, XIcon } from 'lucide-svelte';
 	import ThemeToggler from './ThemeToggler.svelte';
 	interface link {
 		label: string;
@@ -28,28 +29,57 @@
 		}
 		links = links;
 	}
-	// TODO: responsive navbar
+	let showMenu = false;
 </script>
 
 <nav class="block w-full sm:mt-3 mb-6">
-	<div
-		class="flex justify-around items-center w-full sm:max-w-[500px] mx-auto px-6 py-4 sm:rounded-2xl shadow-md sm:border bg-background"
-	>
-		<div class="flex items-center">
+	<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-2 sm:px-6 py-2 sm:py-4 sm:rounded-2xl shadow-md sm:border"
+		>
 			<img src="/icon-96.png" alt="icon" class="w-10" />
-			<!-- <h2 class="font-bold text-xl">Fusion</h2> -->
+			<div class="hidden sm:block">
+				{#each links as l}
+					<Button
+						variant="ghost"
+						href={l.url}
+						class={l.highlight ? 'bg-accent text-accent-foreground' : ''}
+					>
+						{l.label}
+					</Button>
+				{/each}
+			</div>
+			<ThemeToggler className="hidden sm:flex" />
+			<Button
+				variant="ghost"
+				size="icon"
+				on:click={() => (showMenu = !showMenu)}
+				class="flex sm:hidden"
+			>
+				{#if showMenu}
+					<XIcon size="15" />
+				{:else}
+					<MenuIcon size="15" />
+				{/if}
+			</Button>
 		</div>
-		<div>
-			{#each links as l}
-				<Button
-					variant="ghost"
-					href={l.url}
-					class={l.highlight ? 'bg-accent text-accent-foreground' : ''}
-				>
-					{l.label}
-				</Button>
-			{/each}
+
+		<div class="relative w-full">
+			{#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>
-		<ThemeToggler />
 	</div>
 </nav>

frontend/src/lib/components/Navbar.svelte

@@ -5,11 +5,13 @@
 	import Moon from 'lucide-svelte/icons/moon';
 
 	import { setMode, resetMode } from 'mode-watcher';
+
+	export let className = '';
 </script>
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="ghost" size="icon">
+		<Button builders={[builder]} variant="ghost" size="icon" class={className}>
 			<Sun
 				class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 			/>