Added global search.

components/header/header.vue

@@ -1,15 +1,15 @@
 <template>
 	<header class="header">
-		<Link href="/">
-			<h1 class="title">
-				<div
-					class="logo"
-					v-html="logo"
-				/>
-			</h1>
-		</Link>
-
 		<nav class="nav">
+			<Link href="/">
+				<h1 class="title">
+					<div
+						class="logo"
+						v-html="logo"
+					/>
+				</h1>
+			</Link>
+
 			<ul class="nav-list nolist">
 				<li class="nav-item">
 					<Link
@@ -47,17 +47,42 @@
 				</li>
 			</ul>
 		</nav>
+
+		<form
+			class="search"
+			@submit.prevent="search"
+		>
+			<input
+				v-model="query"
+				type="search"
+				placeholder="Search"
+				class="input"
+			>
+
+			<Icon icon="search" />
+		</form>
 	</header>
 </template>
 
 <script setup>
+import { ref, inject } from 'vue';
+import navigate from '#/src/navigate.js';
+
 import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
+
+const pageContext = inject('pageContext');
+const query = ref(pageContext.urlParsed.search.q || '');
+
+function search() {
+	navigate('/search', { q: query.value }, { redirect: true });
+}
 </script>
 
 <style scoped>
 .header {
 	display: flex;
 	align-items: center;
+	justify-content: space-between;
 	z-index: 1000; /* make sure shadow shows up above content */
 	box-shadow: 0 0 3px var(--shadow-weak-10);
 }
@@ -78,7 +103,8 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 }
 
 .nav {
-	display: inline-block;
+	display: flex;
+	align-items: center;
 }
 
 .nav-item .link {
@@ -100,4 +126,28 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 		color: var(--primary);
 	}
 }
+
+.search {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	flex-direction: row-reverse;
+
+	.input {
+		height: 100%;
+		border: none;
+		border-radius: 0;
+		border-left: solid 1px var(--shadow-weak-30);
+		background: var(--background);
+	}
+
+	.icon {
+		margin-right: .75rem;
+		fill: var(--shadow-weak-10);
+	}
+
+	.input:focus + .icon {
+		fill: var(--primary);
+	}
+}
 </style>