feat(docs): Add convenient navigation like vscode

docs/src/layouts/doc-layout/DocHeader.vue

@@ -27,6 +27,10 @@
         nav-class="text-uppercase text-size-16 letter-spacing-300"
       />
 
+      <div class="flex justify-center items-center">
+        <kbd class="quickly-navigation-kbd q-ma-sm text-grey-6" @click="docStore.openQuicklyNavigation"> {{ keysLabel }}</kbd>
+      </div>
+
       <doc-search />
 
       <div v-if="showThemeChanger" class="doc-header-icon-links q-ml-sm row no-wrap items-center">
@@ -110,7 +114,9 @@ import DocHeaderTextLinks from './DocHeaderTextLinks.vue'
 import DocHeaderIconLinks from './DocHeaderIconLinks.vue'
 
 import { useDocStore } from './store/index.js'
+import { useQuasar } from 'quasar'
 const docStore = useDocStore()
+const $q = useQuasar()
 
 const logo = computed(() => {
   const opt = docStore.$q.dark.isActive === true ? '-dark' : ''
@@ -122,9 +128,24 @@ const logo = computed(() => {
 
 const showThemeChanger = computed(() => docStore.$route.meta.dark !== true)
 const hasToc = computed(() => docStore.$route.meta.fullwidth !== true && docStore.$route.meta.fullscreen !== true && docStore.state.value.toc.length !== 0)
+const keysLabel = computed(() => $q.platform.is.mac ? '⌘P' : 'Ctrl+P')
+
 </script>
 
 <style lang="sass">
+.quickly-navigation-kbd
+  box-shadow: none !important
+  padding: 4px
+  background: transparent !important
+  cursor: pointer
+  border: 1px solid transparent
+  transition: border-color 0.3s
+  font-size: 14px
+
+.quickly-navigation-kbd:hover
+  border-color: $primary !important
+  color: $primary !important
+
 .doc-header
   transition: none
 

docs/src/layouts/doc-layout/DocLayout.vue

@@ -28,6 +28,8 @@
     <q-no-ssr>
       <doc-drawer-menu />
       <doc-drawer-toc />
+      <doc-navigation />
+
     </q-no-ssr>
   </q-layout>
 </template>
@@ -43,6 +45,7 @@ import DocDrawerMenu from './DocDrawerMenu.vue'
 import DocDrawerToc from './DocDrawerToc.vue'
 import DocPageMenu from './DocPageMenu.js'
 import DocPageFooter from './DocPageFooter.vue'
+import DocNavigation from './DocNavigation.vue'
 
 const docStore = provideDocStore()
 

docs/src/layouts/doc-layout/DocNavigation.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-dialog v-model:model-value="docStore.state.value.quicklyNavigation" seamless position="top" >
+    <q-card class="navigation">
+      <q-form @submit="navigative" class="full-width">
+        <q-select
+          class="full-width"
+          filled
+          @update:model-value="navigative"
+          @blur="docStore.closeQuicklyNavigation"
+          use-input
+          input-debounce="0"
+          hide-selected
+          autofocus
+          dense
+          options-dense
+          placeholder="Search page by path"
+          :options="options"
+          @filter="filterFn"
+          style="width: 250px"
+        >
+        </q-select>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useDocStore } from './store'
+
+const router = useRouter()
+const allRoutes = router.getRoutes().map((r) => r.path)
+const options = ref(allRoutes)
+
+const docStore = useDocStore()
+
+onMounted(() => {
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'p' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      docStore.openQuicklyNavigation()
+    }
+  })
+})
+
+function navigative (val) {
+  router.push(val)
+  docStore.closeQuicklyNavigation()
+}
+
+function filterFn (val, update) {
+  if (val === '') {
+    update(() => {
+      options.value = allRoutes
+    })
+    return
+  }
+
+  update(() => {
+    const needle = val.toLowerCase()
+    options.value = allRoutes.filter(v => v.toLowerCase().indexOf(needle) > -1)
+  })
+}
+</script>
+
+
+<style scoped>
+.navigation{
+  width: 70vw;
+}
+</style>

docs/src/layouts/doc-layout/store/index.js

@@ -25,7 +25,8 @@ export function provideDocStore () {
     state: {
       dark: $q.cookies.get('theme') !== 'light',
       menuDrawer: false,
-      tocDrawer: false
+      tocDrawer: false,
+      quicklyNavigation: false
     },
 
     toggleDark () {
@@ -39,7 +40,16 @@ export function provideDocStore () {
 
     toggleTocDrawer () {
       store.state.value.tocDrawer = store.state.value.tocDrawer === false
+    },
+
+    openQuicklyNavigation () {
+      store.state.value.quicklyNavigation = true
+    },
+
+    closeQuicklyNavigation () {
+      store.state.value.quicklyNavigation = false
     }
+
   }
 
   injectToc(store)