docs(app): improve navigation filtering logic (#5453)

Author: hywax

docs/app/layouts/docs.vue

@@ -10,18 +10,25 @@ const { navigationByCategory } = useNavigation(navigation!)
 
 const { contains } = useFilter({ sensitivity: 'base' })
 const filteredNavigation = computed(() => {
-  if (!value.value) {
+  if (!searchTerm.value) {
     return navigationByCategory.value
   }
 
   return navigationByCategory.value.map(item => ({
     ...item,
-    children: item.children?.filter(child => contains(child.title as string, value.value) || contains(child.description as string, value.value))
+    children: item.children?.filter(child => contains(child.title as string, searchTerm.value) || contains(child.description as string, searchTerm.value))
   })).filter(item => item.children && item.children.length > 0)
 })
 
 const input = useTemplateRef('input')
-const value = ref('')
+const isActiveSearch = computed(() => route.path.startsWith('/docs/components'))
+const searchTerm = ref('')
+
+watch(() => route.path, () => {
+  if (!isActiveSearch.value) {
+    searchTerm.value = ''
+  }
+})
 
 defineShortcuts({
   '/': {
@@ -39,8 +46,8 @@ defineShortcuts({
       <UPage>
         <template #left>
           <UPageAside>
-            <template v-if="route.path.startsWith('/docs/components')" #top>
-              <UInput ref="input" v-model="value" variant="soft" placeholder="Filter..." class="group">
+            <template v-if="isActiveSearch" #top>
+              <UInput ref="input" v-model="searchTerm" variant="soft" placeholder="Filter..." class="group">
                 <template #trailing>
                   <UKbd value="/" variant="subtle" class="ring-muted bg-transparent text-muted" />
                 </template>