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