Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 14:59:36 +02:00
Code Issues Releases Activity

feat: Enhance Navbar with new icons and improved button layout

Browse source
This commit is contained in:
Sean Morley 2025-02-09 15:42:46 -05:00
parent cf4691beaf
commit 60b5bbb3c8
1 changed files with 46 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,11 @@
import Calendar from '~icons/mdi/calendar';
import AboutModal from './AboutModal.svelte';
import AccountMultiple from '~icons/mdi/account-multiple';
import MapMarker from '~icons/mdi/map-marker';
import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square';
import Earth from '~icons/mdi/earth';
import Magnify from '~icons/mdi/magnify';
import Map from '~icons/mdi/map';
import Avatar from './Avatar.svelte';
import { page } from '$app/stores';
import { t, locale, locales } from 'svelte-i18n';
@ -18,7 +23,10 @@
// Event listener for focusing input
function handleKeydown(event: KeyboardEvent) {
// Ignore any keypresses in an input/textarea field, so we don't interfere with typing.
if (event.key === '/' && !["INPUT", "TEXTAREA"].includes((event.target as HTMLElement)?.tagName)) {
if (
event.key === '/' &&
!['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement)?.tagName)
) {
event.preventDefault(); // Prevent browser's search shortcut
if (inputElement) {
inputElement.focus();
@ -111,6 +119,7 @@
>
{#if data.user}
<li>
<MapMarker />
<button on:click={() => goto('/adventures')}>{$t('navbar.adventures')}</button>
</li>
<li>
@ -168,36 +177,53 @@
{/if}
</ul>
</div>
<a class="btn btn-ghost text-xl" href="/"
>AdventureLog <img src="/favicon.png" alt="Map Logo" class="w-10" /></a
>
<a class="btn btn-ghost text-2xl font-bold tracking-normal" href="/">
AdventureLog <img src="/favicon.png" alt="Map Logo" class="w-10" />
</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 gap-2">
{#if data.user}
<li>
<button class="btn btn-neutral" on:click={() => goto('/adventures')}
>{$t('navbar.adventures')}</button
<button
class="btn btn-neutral flex items-center gap-1"
on:click={() => goto('/adventures')}
>
<MapMarker class="w-5 h-5" />
<span>{$t('navbar.adventures')}</span>
</button>
</li>
<li>
<button
class="btn btn-neutral flex items-center gap-1"
on:click={() => goto('/collections')}
>
<FormatListBulletedSquare class="w-5 h-5" />
{$t('navbar.collections')}</button
>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/collections')}
>{$t('navbar.collections')}</button
<button
class="btn btn-neutral flex items-center gap-1"
on:click={() => goto('/worldtravel')}
>
<Earth class="w-5 h-5" />
{$t('navbar.worldtravel')}
</button>
</li>
<li>
<button class="btn btn-neutral flex items-center gap-1" on:click={() => goto('/map')}>
<Map class="w-5 h-5" />
{$t('navbar.map')}</button
>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}
>{$t('navbar.worldtravel')}</button
<button class="btn btn-neutral flex items-center gap-1" on:click={() => goto('/calendar')}
><Calendar /></button
>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/map')}>{$t('navbar.map')}</button>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/calendar')}><Calendar /></button>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/users')}
<button class="btn btn-neutral flex items-center gap-1" on:click={() => goto('/users')}
><AccountMultiple /></button
>
</li>
@ -226,8 +252,9 @@
bind:this={inputElement}
/><kbd class="kbd">/</kbd>
</label>
<button on:click={searchGo} type="submit" class="btn btn-neutral"
>{$t('navbar.search')}</button
<button on:click={searchGo} type="submit" class="btn btn-neutral flex items-center gap-1">
<Magnify class="w-5 h-5" />
{$t('navbar.search')}</button
>
</form>
{/if}