Add stikcy search bar

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>

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 {

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>