From d59bb9be8a13cf474fd5bf0622ab5ccac4d59ee1 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 12 Apr 2024 00:32:36 +1200
Subject: [PATCH] Added improved search bar

---
 materialious/src/lib/Search.svelte | 54 ++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/materialious/src/lib/Search.svelte b/materialious/src/lib/Search.svelte
index dcffa8fb..a9220a82 100644
--- a/materialious/src/lib/Search.svelte
+++ b/materialious/src/lib/Search.svelte
@@ -26,25 +26,43 @@
 </script>
 
 <form on:submit|preventDefault={() => goto(`/search/${encodeURIComponent(search)}`)}>
-	<div class="max field round suffix prefix small no-margin white black-text">
-		<i class="front">search</i><input
-			data-ui="search-suggestions"
-			type="text"
-			placeholder={$_('searchPlaceholder')}
-			bind:value={search}
-			on:keyup={(target) => debouncedSearch(target)}
-		/>
-		{#if searchSuggestions}
-			<menu
-				class="no-wrap"
-				style="width: 100%;"
-				id="search-suggestions"
-				data-ui="#search-suggestions"
-			>
+	<div class="field prefix round fill no-margin search">
+		<i class="front">search</i>
+		<input bind:value={search} on:click={() => document.getElementById('search')?.focus()} />
+		<menu class="min">
+			<div class="field large prefix suffix no-margin fixed">
+				<i class="front">arrow_back</i>
+				<input
+					placeholder={$_('searchPlaceholder')}
+					type="text"
+					id="search"
+					bind:value={search}
+					on:keyup={(target) => debouncedSearch(target)}
+				/>
+				<i class="front" on:click={() => (search = '')}>close</i>
+			</div>
+			{#if searchSuggestions}
 				{#each suggestionsForSearch as suggestion}
-					<a href={`/search/${encodeURIComponent(suggestion)}`}>{suggestion}</a>
+					<a
+						on:click={() => (search = suggestion)}
+						class="row"
+						href={`/search/${encodeURIComponent(suggestion)}`}
+					>
+						<div>{suggestion}</div>
+					</a>
 				{/each}
-			</menu>
-		{/if}
+			{/if}
+		</menu>
 	</div>
 </form>
+
+<style>
+	.search {
+		width: 500px;
+	}
+	@media screen and (max-width: 1140px) {
+		.search {
+			width: 100%;
+		}
+	}
+</style>