Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-19 04:49:37 +02:00
Code Issues Releases Activity

fix: enhance Navbar component with scroll effect and improve layout responsiveness

Browse source
This commit is contained in:
Sean Morley 2025-06-06 10:21:53 -04:00
parent 5d0132a2a8
commit 2d7b6c85c9
1 changed files with 45 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

62
frontend/src/lib/components/Navbar.svelte
View file

@ -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" />
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>