diff --git a/src/App/Header.svelte b/src/App/Header.svelte
index ca24e4da4..863d69e45 100644
--- a/src/App/Header.svelte
+++ b/src/App/Header.svelte
@@ -62,7 +62,9 @@
-
+
+
+
-
diff --git a/src/App/Header/Search.svelte b/src/App/Header/Search.svelte
index 04d188013..c4c963a47 100644
--- a/src/App/Header/Search.svelte
+++ b/src/App/Header/Search.svelte
@@ -16,15 +16,14 @@
}>();
export let input = "";
+
let loading = false;
let shaking = false;
+ let expanded = false;
// Clears search input on user navigation.
router.historyStore.subscribe(() => (input = ""));
- const collapsedWidth = 13;
- const expandedWidth = 20;
-
function shake() {
shaking = true;
debounce(() => (shaking = false), 500)();
@@ -69,7 +68,7 @@
});
}
dispatch("finished");
- searchBarWidth = collapsedWidth;
+ expanded = false;
} else {
unreachable(searchResult);
}
@@ -77,7 +76,6 @@
}
$: valid = input !== "";
- $: searchBarWidth = collapsedWidth;
-
+
(searchBarWidth = expandedWidth)}
- on:blur={() =>
- input === "" ? (searchBarWidth = collapsedWidth) : undefined}
+ on:focus={() => {
+ expanded = true;
+ }}
+ on:blur={() => {
+ if (input === "") {
+ expanded = false;
+ }
+ }}
on:submit={search}
placeholder="Search a nameā¦">