feat: add a search button on the nav

Author: antfu

README.md

@@ -44,10 +44,10 @@ The development server will be running at [http://localhost:3000](http://localho
   - [ ] Allow each guide to configure file filter
   - [ ] Persist user changes when toggling solutions
   - [ ] Verification for tutorial tasks
-  - [ ] Search feature
+  - [x] Search feature
     - [x] Search in command palette
-    - [ ] Search button
-  - [ ] Navigation
+    - [x] Search button
+  - [x] Navigation
     - [x] Dropdown for guide outlines
     - [x] Breadcrumbs
     - [x] Previous/Next buttons

components/CommandPalette.vue

@@ -88,7 +88,10 @@ useEventListener('keydown', (e) => {
     v-if="commands.isShown"
     fixed inset-0 z-index-command-palette flex="~ items-center justify-center"
   >
-    <div absolute inset-0 z--1 bg-black:75 />
+    <div
+      absolute inset-0 z--1 bg-black:75
+      @click="commands.isShown = false"
+    />
     <div
       border="~ base rounded" h-100 w-200 of-hidden bg-base
       grid="~ rows-[max-content_1fr]"

components/TheNav.vue

@@ -3,6 +3,7 @@ const ui = useUiState()
 const play = usePlaygroundStore()
 const guide = useGuideStore()
 const runtime = useRuntimeConfig()
+const commands = useCommandsStore()
 
 const repo = 'https://github.com/nuxt/learn.nuxt.com'
 const buildTime = new Date(runtime.public.buildTime)
@@ -44,6 +45,14 @@ addCommands(
       flex="~ gap-1 items-center"
       :class="guide.embeddedDocs ? 'z-embedded-docs-raised' : ''"
     >
+      <button
+        rounded p2
+        hover="bg-active"
+        title="Search"
+        @click="commands.isShown = true"
+      >
+        <div i-ph-magnifying-glass-duotone text-2xl />
+      </button>
       <button
         v-if="play.status === 'ready' && guide.features.download !== false"
         rounded p2