From 60b5bbb3c8192d90d4a03de294f1f9d37d7d3fc9 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 9 Feb 2025 15:42:46 -0500
Subject: [PATCH] feat: Enhance Navbar with new icons and improved button
 layout

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

diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index f69cb27..f57793b 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -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}