feat: mobile search

Author: onmax

packages/nimiq-vitepress-theme/src/layout/MobileNav.vue

@@ -2,14 +2,16 @@
 import { watchDebounced } from '@vueuse/core'
 import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 import { useRouter, withBase } from 'vitepress'
-import { ref, watch } from 'vue'
+import { defineAsyncComponent, ref, watch } from 'vue'
 import { useSecondarySidebar } from '../composables/useSecondarySidebar'
-import SecondarySidebar from './SecondarySidebar.vue'
-import Sidebar from './Sidebar.vue'
 
 const open = ref(false)
 const openSecondarySidebar = ref(false)
 
+const SearchCommandBox = defineAsyncComponent(() => import('./SearchCommandBox.vue'))
+const SecondarySidebar = defineAsyncComponent(() => import('./SecondarySidebar.vue'))
+const Sidebar = defineAsyncComponent(() => import('./Sidebar.vue'))
+
 const shouldTeleport = ref(false)
 watchDebounced(
   () => openSecondarySidebar.value,
@@ -33,8 +35,11 @@ const { showWidget } = useSecondarySidebar()
 
 <template>
   <div>
-    <div v-if="showWidget" id="widget" fixed bottom-64 rounded-4 bg-neutral-50 shadow w="[calc(100vw-16px)]" inset-x-8 />
-    <nav w-screen border="t neutral-300" nq-raw bg-neutral-0 z-10 :data-sidebar="open ? '' : undefined">
+    <div
+      v-if="showWidget" id="widget" fixed bottom-64 rounded-4 bg-neutral-50 shadow w="[calc(100vw-16px)]"
+      inset-x-8
+    />
+    <nav w-screen border="t neutral-300" nq-raw bg-neutral-0 z-50 :data-sidebar="open ? '' : undefined">
       <ul grid="~ items-center" :class="showSecondarySidebar ? 'cols-4' : 'cols-3'" children:children:h-56>
         <li>
           <a :href="withBase('')" stack>
@@ -49,27 +54,36 @@ const { showWidget } = useSecondarySidebar()
             </DrawerTrigger>
             <DrawerPortal>
               <DrawerOverlay fixed inset-0 bg-neutral bg-opacity-20 />
-              <DrawerContent mt-24 max-h="96%" h-80vh fixed bottom-56 left-0 right-0>
+              <DrawerContent mt-24 max-h="96%" h-80vh fixed bottom-0 left-0 right-0>
                 <SecondarySidebar :with-widget="false" bg-neutral-100 w-screen f-pt-sm rounded-t-12 />
               </DrawerContent>
             </DrawerPortal>
           </DrawerRoot>
         </li>
 
         <li px-8>
-          <a :href="withBase('')" nq-pill-blue nq-pill-lg h-48="!" w-full outline="~ 1.5 offset--1.5 white/8">
-            <div i-nimiq:magnifying-glass />
-          </a>
+          <DrawerRoot v-model:open="open">
+            <DrawerTrigger stack nq-pill-blue nq-pill-lg h-48="!" w-full outline="~ 1.5 offset--1.5 white/8">
+              <div i-nimiq:magnifying-glass />
+            </DrawerTrigger>
+            <DrawerPortal>
+              <DrawerOverlay fixed inset-0 bg-neutral bg-opacity-20 />
+              <DrawerContent mt-24 max-h="96%" h-80vh fixed bottom-0 left-0 right-0 bg-neutral-100 rounded-t-12 f-pt-sm>
+                <!-- <Sidebar :search="false" w-screen f-pt-sm rounded-t-12 /> -->
+                <SearchCommandBox @close="handleClose" />
+              </DrawerContent>
+            </DrawerPortal>
+          </DrawerRoot>
         </li>
 
         <li>
-          <DrawerRoot v-model:open="open">
+          <DrawerRoot>
             <DrawerTrigger stack bg-transparent>
               <div i-tabler:menu-2 text-20 />
             </DrawerTrigger>
             <DrawerPortal>
               <DrawerOverlay fixed inset-0 bg-neutral bg-opacity-20 />
-              <DrawerContent mt-24 max-h="96%" h-80vh fixed bottom-56 left-0 right-0>
+              <DrawerContent mt-24 max-h="96%" h-80vh bottom-0 fixed left-0 right-0>
                 <Sidebar :search="false" w-screen f-pt-sm rounded-t-12 />
               </DrawerContent>
             </DrawerPortal>

packages/nimiq-vitepress-theme/src/layout/SearchCommandBox.vue

@@ -141,7 +141,7 @@ function formMarkRegex(terms: Set<string>) {
 
     <ListboxContent
       :ref="(node) => { if (node && '$el' in node){ resultsEl = node.$el } }"
-      as="ul" max-h-55vh of-auto empty="hidden md:block"
+      as="ul" md:max-h-55vh of-auto empty="hidden md:block"
     >
       <ListboxItem
         v-for="p in results" :key="p.id" :value="p.id"