From e1c22eeffb338def5ac14c47cd758f1f7d9045ca Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Wed, 10 May 2023 23:32:02 +0200
Subject: [PATCH] Add stikcy search bar

---
 .../icons/IconsCategoryOverview.vue           | 21 +++++++++-----
 .../theme/components/icons/IconsOverview.vue  | 17 ++++++-----
 .../theme/components/icons/StickyBar.vue      | 28 +++++++++++++++++++
 3 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/icons/StickyBar.vue

diff --git a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
index c06a5de8b..ddf8de4dc 100644
--- a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
+++ b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue
@@ -6,6 +6,7 @@ import IconGrid from './IconGrid.vue'
 import useSearch from '../../composables/useSearch'
 import InputSearch from '../base/InputSearch.vue'
 import useSearchInput from '../../composables/useSearchInput'
+import StickyBar from './StickyBar.vue'
 
 const props = defineProps<{
   icons: IconEntity[]
@@ -53,12 +54,14 @@ const activeIcon = computed(() =>
 </script>
 
 <template>
-  <InputSearch
-    :placeholder="`Search ${icons.length} icons ...`"
-    v-model="searchQuery"
-    class="input-wrapper"
-    ref="searchInput"
-  />
+  <StickyBar>
+    <InputSearch
+      :placeholder="`Search ${icons.length} icons ...`"
+      v-model="searchQuery"
+      class="input-wrapper"
+      ref="searchInput"
+    />
+  </StickyBar>
   <section class="category" v-for="category in categories" :key="category.name">
     <h2 class="title" :id="category.name">
       <a class="header-anchor" :href="`#${category.name}`" :aria-label="`Permalink to &quot;${category.title}&quot;`">&ZeroWidthSpace;</a>
@@ -90,6 +93,10 @@ const activeIcon = computed(() =>
 }
 
 .input-wrapper {
-  margin-bottom: 32px;
+  width: 100%;
 }
+
+/* .input-wrapper {
+  margin-bottom: 32px;
+} */
 </style>
diff --git a/docs/.vitepress/theme/components/icons/IconsOverview.vue b/docs/.vitepress/theme/components/icons/IconsOverview.vue
index 8c2343a85..6e08ec23a 100644
--- a/docs/.vitepress/theme/components/icons/IconsOverview.vue
+++ b/docs/.vitepress/theme/components/icons/IconsOverview.vue
@@ -8,6 +8,7 @@ import InputSearch from '../base/InputSearch.vue'
 import useSearch from '../../composables/useSearch'
 import EndOfPage from '../base/EndOfPage.vue'
 import useSearchInput from '../../composables/useSearchInput'
+import StickyBar from './StickyBar.vue'
 
 const props = defineProps<{
   icons: IconEntity[]
@@ -68,12 +69,14 @@ watch(searchQueryThrottled, (searchString) => {
 </script>
 
 <template>
-  <InputSearch
-    :placeholder="`Search ${icons.length} icons ...`"
-    v-model="searchQuery"
-    class="input-wrapper"
-    ref="searchInput"
-  />
+  <StickyBar>
+    <InputSearch
+      :placeholder="`Search ${icons.length} icons ...`"
+      v-model="searchQuery"
+      ref="searchInput"
+      class="input-wrapper"
+    />
+  </StickyBar>
   <IconGrid
     overlayMode
     :activeIcon="activeIconName"
@@ -97,7 +100,7 @@ watch(searchQueryThrottled, (searchString) => {
 }
 
 .input-wrapper {
-  margin-bottom: 16px;
+  width: 100%;
 }
 
 .bottom-page {
diff --git a/docs/.vitepress/theme/components/icons/StickyBar.vue b/docs/.vitepress/theme/components/icons/StickyBar.vue
new file mode 100644
index 000000000..737f73935
--- /dev/null
+++ b/docs/.vitepress/theme/components/icons/StickyBar.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="search-bar">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.search-bar {
+  margin-bottom: 16px;
+  position: sticky;
+  z-index: 70;
+  top: 48px;
+  padding-top: 24px;
+  margin-top: -32px;
+  width: 100%;
+  display: flex;
+  margin-bottom: 32px;;
+  background: var(--vp-c-bg);
+  box-shadow: 0 16px 24px var(--vp-c-bg);
+}
+
+@media (min-width: 960px) {
+  .search-bar {
+    padding-top: 32px;
+    top: 64px;
+  }
+}
+</style>