From fefc5291c2d21ac3fa8e6458569d156006811226 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Thu, 29 Feb 2024 05:24:34 +0100
Subject: [PATCH] Improved header search bar design.

---
 components/header/header.vue | 43 +++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/components/header/header.vue b/components/header/header.vue
index 313c41c..505bdb8 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -11,6 +11,7 @@
 			</Link>
 
 			<ul class="nav-list nolist">
+				<!--
 				<li class="nav-item">
 					<Link
 						class="link"
@@ -18,6 +19,7 @@
 						href="/updates"
 					>Updates</Link>
 				</li>
+				-->
 
 				<li class="nav-item">
 					<Link
@@ -56,6 +58,7 @@
 		<div class="header-section">
 			<form
 				class="search"
+				:class="{ focused: searchFocused }"
 				@submit.prevent="search"
 			>
 				<input
@@ -63,9 +66,13 @@
 					type="search"
 					placeholder="Search"
 					class="input"
+					@focus="searchFocused = true"
+					@blur="searchFocused = false"
 				>
 
-				<Icon icon="search" />
+				<button class="search-button">
+					<Icon icon="search" />
+				</button>
 			</form>
 
 			<VDropdown
@@ -120,6 +127,7 @@ const pageContext = inject('pageContext');
 
 const user = pageContext.user;
 const query = ref(pageContext.urlParsed.search.q || '');
+const searchFocused = ref(false);
 
 const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;
@@ -186,28 +194,43 @@ async function logout() {
 .header-section {
 	height: 100%;
 	display: flex;
-	align-items: stretch;
+	align-items: center;
 }
 
 .search {
+	height: 2rem;
 	display: flex;
 	align-items: center;
-	flex-direction: row-reverse; /* allow icon to be selected */
+	border: solid 1px var(--shadow-weak-20);
+	border-radius: 1rem;
+	background: var(--background);
 
 	.input {
-		padding: .5rem 1rem;
-		border-radius: 1rem;
-		background: var(--background);
+		padding: .5rem 0 .5rem 1rem;
+		border: none;
 		margin: 0;
+		background: none;
+	}
+
+	.search-button {
+		padding: 0;
+		border: none;
+		background: none;
 	}
 
 	.icon {
-		margin-right: .75rem;
+		height: 100%;
+		padding: 0 .75rem 0 .5rem;
 		fill: var(--shadow-weak-10);
 	}
 
-	.input:focus + .icon {
-		fill: var(--primary);
+	&.focused {
+		border: solid 1px var(--primary-light-10);
+
+		.icon {
+			fill: var(--primary);
+			cursor: pointer;
+		}
 	}
 }
 
@@ -215,7 +238,7 @@ async function logout() {
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: 0 1rem;
+	padding: 0 1rem 0 1.5rem;
 	font-size: 0;
 	cursor: pointer;