fix(search): handle back docsearch properly

Fix #965

Author: atinux

.starters/default/nuxt.config.ts

@@ -7,5 +7,17 @@ export default defineNuxtConfig({
     '@nuxtjs/plausible',
     // https://github.com/nuxt/devtools
     '@nuxt/devtools'
-  ]
+  ],
+  runtimeConfig: {
+    public: {
+      algolia: {
+        applicationId: 'Q46Q8609QS',
+        apiKey: '1661c72375532f074aedd9452a1270be',
+        langAttribute: 'lang',
+        docSearch: {
+          indexName: 'content-nuxtjs'
+        }
+      }
+    }
+  }
 })

components/app/AppDocSearch.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const { element } = useDocSearch()
+
+const onClick = () => element.value.querySelector('button').click()
+</script>
+
+<template>
+  <button
+    type="button"
+    aria-label="Search"
+    @click="onClick"
+  >
+    <span class="content">
+      <Icon name="heroicons-outline:search" />
+      <span>Search</span>
+      <span>
+        <kbd>⌘</kbd>
+        <kbd>K</kbd>
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped lang="ts">
+css({
+  button: {
+    padding: '{space.2} {space.2}',
+    '.content': {
+      borderRadius: '{radii.md}',
+      display: 'flex',
+      alignItems: 'center',
+      color: '{color.gray.500}',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderColor: '{color.gray.100}',
+      fontSize: '{fontSize.xs}',
+      gap: '{space.2}',
+      padding: '{space.rem.375}',
+      '@dark': {
+        color: '{color.gray.400}',
+        borderColor: '{color.gray.900}',
+      },
+      '&:hover': {
+        color: '{color.gray.700}',
+        borderColor: '{color.gray.400}',
+        '@dark': {
+          color: '{color.gray.200}',
+          borderColor: '{color.gray.700}',
+        }
+      },
+      span: {
+        flex: 'none',
+        display: 'none',
+        fontSize: '{fontSize.xs}',
+        '@lg': {
+          display: 'block'
+        }
+      }
+    }
+  },
+})
+</style>

components/app/AppHeader.vue

@@ -11,7 +11,7 @@ defineProps({
 </script>
 
 <template>
-  <header :class="{ 'has-dialog': hasDialog, 'has-doc-search': hasDocSearch }">
+  <header :class="{ 'has-dialog': hasDialog }">
     <Container :fluid="config?.header?.fluid ">
       <div class="section left">
         <AppHeaderDialog v-if="hasDialog" />
@@ -24,7 +24,9 @@ defineProps({
       </div>
 
       <div class="section right">
+        <AppDocSearch v-if="hasDocSearch" />
         <AppSearch
+          v-else
           :fuse="config.fuse"
         />
         <ThemeSelect />