From 2304fc9d1a391372a6714502fb769c9d1a5ed182 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Thu, 6 Jan 2022 19:21:39 +0100
Subject: [PATCH] word/edit: search input form in hierarchy navigation

Styling to move it to top, and hide input until focused.
---
 word/edit.plp   |  4 ++++
 word/editor.css | 31 +++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/word/edit.plp b/word/edit.plp
index 1d766b9..0f212b8 100644
--- a/word/edit.plp
+++ b/word/edit.plp
@@ -328,6 +328,10 @@ while (my $ref = $children->hash) {
 	<input type="submit" value="Add" />
 </form></li>
 </ul>
+
+<form id="search">
+	<input type="search" name="q" value="" placeholder="search" /><button type="submit">🔍</button>
+</form>
 </section>
 <:
 }
diff --git a/word/editor.css b/word/editor.css
index 1e0dc5b..2e89bb5 100644
--- a/word/editor.css
+++ b/word/editor.css
@@ -96,3 +96,34 @@ h1 {
 	margin: 1ex 0;
 	display: inline-block;
 }
+
+#nav {
+	position: relative;
+}
+form#search {
+	display: block;
+	position: absolute;
+	width: 100%;
+	text-align: right;
+	top: -7ex;
+}
+#search input {
+	width: 100%;
+	transition: all .5s ease-in;
+}
+#search:not(:focus-within) input {
+	width: 0;
+	padding-left: 0;
+	padding-right: 0;
+	visibility: hidden;
+}
+#search button {
+	position: absolute;
+	right: 0;
+	height: 100%; /* like input */
+	border: 0;
+	background: none;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+}
-- 
2.30.0