activity types for autocomplete in the future

frontend/src/lib/components/Navbar.svelte

@@ -12,6 +12,9 @@
 	import Water from '~icons/mdi/water';
 	import AboutModal from './AboutModal.svelte';
 	import Avatar from './Avatar.svelte';
+	import { page } from '$app/stores';
+
+	let query: string = '';
 
 	let isAboutModalOpen: boolean = false;
 
@@ -22,6 +25,22 @@
 			document.documentElement.setAttribute('data-theme', theme);
 		}
 	};
+
+	const searchGo = async (e: Event) => {
+		e.preventDefault();
+		let reload: boolean = false;
+
+		if ($page.url.pathname === '/search') {
+			reload = true;
+		}
+
+		if (query) {
+			await goto(`/search?query=${query}`);
+			if (reload) {
+				window.location.reload();
+			}
+		}
+	};
 </script>
 
 {#if isAboutModalOpen}
@@ -96,6 +115,24 @@
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/map')}>Map</button>
 				</li>
+				<label class="input input-bordered flex items-center gap-2">
+					<form>
+						<input type="text" bind:value={query} class="grow" placeholder="Search" />
+					</form>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="h-4 w-4 opacity-70"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</label>
+				<button on:click={searchGo} type="submit" class="btn btn-neutral">Search</button>
 			{/if}
 
 			{#if !data.user}