From 2d7b6c85c9d371bb6060491f94ab1dc13bca58a6 Mon Sep 17 00:00:00 2001
From: Sean Morley <mail@seanmorley.com>
Date: Fri, 6 Jun 2025 10:21:53 -0400
Subject: [PATCH] fix: enhance Navbar component with scroll effect and improve
 layout responsiveness

---
 frontend/src/lib/components/Navbar.svelte | 64 ++++++++++++++++-------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index ee75fa5..b4f6854 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -20,6 +20,13 @@
 	import { onMount } from 'svelte';
 	let inputElement: HTMLInputElement | null = null;
 
+	let isScrolled = false;
+
+	// Handle scroll effect
+	function handleScroll() {
+		isScrolled = window.scrollY > 10;
+	}
+
 	let theme = '';
 
 	// Event listener for focusing input
@@ -37,15 +44,13 @@
 	}
 
 	onMount(() => {
-		// Attach event listener on component mount
 		document.addEventListener('keydown', handleKeydown);
+		window.addEventListener('scroll', handleScroll);
+		theme = document.documentElement.getAttribute('data-theme') || '';
 
-		// @ts-ignore
-		theme = document.documentElement.getAttribute('data-theme');
-
-		// Cleanup event listener on component destruction
 		return () => {
 			document.removeEventListener('keydown', handleKeydown);
+			window.removeEventListener('scroll', handleScroll);
 		};
 	});
 
@@ -108,7 +113,11 @@
 	<AboutModal on:close={() => (isAboutModalOpen = false)} />
 {/if}
 
-<div class="navbar bg-base-100">
+<nav
+	class="navbar sticky top-0 z-50 transition-all duration-300 {isScrolled
+		? 'bg-base-100/80 backdrop-blur-lg shadow-lg border-b border-base-300/50'
+		: 'bg-base-100'}"
+>
 	<div class="navbar-start">
 		<div class="dropdown z-50">
 			<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@@ -190,9 +199,19 @@
 				{/if}
 			</ul>
 		</div>
-		<a class="btn btn-ghost p-0 text-2xl font-bold tracking-normal" href="/">
-			<span class="sm:inline hidden">AdventureLog</span>
-			<img src="/favicon.png" alt="Map Logo" class="w-10" />
+		<a href="/" class="btn btn-ghost hover:bg-transparent group">
+			<div class="flex items-center space-x-3">
+				<div class="relative">
+					<img
+						src="/favicon.png"
+						alt="AdventureLog"
+						class="w-10 h-10 transition-transform duration-300 group-hover:scale-110"
+					/>
+					<div
+						class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+					></div>
+				</div>
+			</div>
 		</a>
 	</div>
 	<div class="navbar-center hidden lg:flex">
@@ -255,19 +274,26 @@
 			{/if}
 
 			{#if data.user}
-				<form class="flex gap-2">
-					<label class="input input-bordered flex items-center gap-2">
+				<form class="hidden md:flex relative group" on:submit={searchGo}>
+					<div class="relative">
 						<input
 							type="text"
 							bind:value={query}
-							class="grow"
-							placeholder={$t('navbar.search')}
 							bind:this={inputElement}
-						/><kbd class="kbd">/</kbd>
-					</label>
-					<button on:click={searchGo} type="submit" class="btn btn-neutral flex items-center gap-1">
-						<Magnify class="w-5 h-5" />
-					</button>
+							placeholder={$t('navbar.search')}
+							class="input input-bordered bg-neutral border-base-300 focus:border-primary focus:bg-base-100 transition-all duration-300 pr-20 w-64 group-focus-within:w-72"
+						/>
+						<div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center space-x-2">
+							<kbd class="kbd kbd-sm opacity-60">/ </kbd>
+							<button
+								type="submit"
+								class="btn btn-sm btn-circle btn-ghost hover:btn-primary transition-all duration-200"
+								aria-label="Search"
+							>
+								<Magnify class="w-4 h-4 text-neutral-300" />
+							</button>
+						</div>
+					</div>
 				</form>
 			{/if}
 		</ul>
@@ -330,4 +356,4 @@
 			</ul>
 		</div>
 	</div>
-</div>
+</nav>