Feat: better responsive support for docs App Bar

packages/docs/src/components/app/bar/Bar.vue

@@ -1,55 +1,49 @@
 <template>
-  <VoAppBar
-    id="app-bar"
-    border="b"
-    class="px-md-3"
-    logo="vuetify"
-    flat
-  >
-    <template #prepend>
-      <div class="px-1" />
-
+  <VoAppBar id="app-bar" border="b" class="px-md-3" logo="vuetify" flat>
+    <template #prepend-fixed>
       <AppBtn
         v-if="route.meta.layout !== 'home' && mdAndDown"
+        class="ms-2"
         icon="mdi-menu"
         @click="app.drawer = !app.drawer"
       />
+    </template>
 
+    <template #prepend>
       <AppSearchSearch />
     </template>
 
     <template #append>
-      <div v-if="mdAndUp" class="d-flex ga-1">
-        <AppBarLearnMenu />
+      <AppBarLearnMenu />
 
-        <AppBarSupportMenu />
+      <AppBarSupportMenu />
 
-        <AppBarEcosystemMenu />
+      <AppBarEcosystemMenu />
 
-        <AppBarPlaygroundLink v-if="lgAndUp" />
+      <AppBarPlaygroundLink />
 
-        <AppBarSponsorLink />
-      </div>
+      <AppBarSponsorLink />
 
-      <AppVerticalDivider v-if="smAndUp" />
+      <AppVerticalDivider v-if="!one.mobileBreakpoint.value" />
+      <v-divider v-else class="mt-4 mb-2" />
 
-      <div class="d-flex ga-1">
-        <AppBarStoreLink v-if="smAndUp" />
+      <AppBarStoreLink />
 
-        <AppBarGitHubLink v-if="smAndUp" />
+      <AppBarGitHubLink />
 
-        <AppBarLanguageMenu />
+      <AppBarLanguageMenu />
 
-        <AppBarSettingsToggle />
-      </div>
+      <AppBarSettingsToggle />
     </template>
   </VoAppBar>
 </template>
 
 <script setup>
   const app = useAppStore()
-  const { smAndUp, lgAndUp, mdAndDown, width } = useDisplay()
   const route = useRoute()
+  const one = useOneStore()
+
+  const { mdAndDown } = useDisplay()
 
-  const mdAndUp = computed(() => width.value >= 1077)
+  one.syncMobileBreakpoint(mdAndDown)
 </script>

packages/docs/src/components/app/bar/JobsLink.vue

@@ -1,5 +1,6 @@
 <template>
   <v-badge
+    :class="{'vertical-middle': one.mobileBreakpoint.value}"
     :model-value="newJobs.length > 0"
     color="#ED561B"
     location="top end"
@@ -17,6 +18,7 @@
 <script setup>
   const { currentRoute } = useRouter()
   const { name } = useRoute()
+  const one = useOneStore()
   const newJobs = []
 
   const icon = computed(() => {
@@ -29,4 +31,7 @@
 <style lang="sass">
   .jobs-link .v-btn:not(:hover)::before
     display: none
+
+  .vertical-middle
+    vertical-align: middle
 </style>

packages/docs/src/components/app/bar/SettingsToggle.vue

@@ -25,12 +25,14 @@
 
 <script setup>
   const app = useAppStore()
+  const one = useOneStore()
   const pwa = usePwaStore()
   const { name } = useRoute()
 
   function onClick () {
     sweClick('app-bar', 'settings-toggle', name)
 
     app.settings = !app.settings
+    one.mobileMenu = false
   }
 </script>

packages/docs/src/components/app/search/Search.vue

@@ -1,23 +1,18 @@
 <template>
   <AppBtn
     :active="model"
-    :icon="xs ? 'mdi-magnify' : undefined"
+    :block="isMobile"
+    :class="{'justify-start px-5': isMobile, 'ms-2': !isMobile}"
     :loading="loading ? 'primary' : undefined"
-    :prepend-icon="smAndUp ? 'mdi-magnify' : undefined"
+    :variant="isMobile ? 'tonal' : undefined"
+    prepend-icon="mdi-magnify"
     @click="shouldLoad = true"
   >
-    <span :class="mdAndUp && 'me-n1'">
-      <span v-if="smAndUp">
-        {{ t('search.label') }}
-      </span>
+    <span :class="isMobile && 'me-n1'">
+      <span> {{ t('search.label') }} </span>
 
-      <span
-        :class="[
-          smAndDown ? 'border-opacity-0' : 'py-1 px-2 ms-2',
-          'border rounded text-disabled text-caption'
-        ]"
-      >
-        <span v-if="mdAndUp">
+      <span v-if="!isMobile" class="py-1 px-2 ms-2 border rounded text-disabled text-caption">
+        <span>
           {{ t(`search.key-hint${user.slashSearch ? '-slash' : platform.mac ? '-mac' : ''}`) }}
         </span>
       </span>
@@ -38,15 +33,18 @@
   const SearchDialog = defineAsyncComponent(() => import('@/components/app/search/SearchDialog.vue'))
 
   const { t } = useI18n()
-  const { smAndUp, smAndDown, mdAndUp, xs, platform } = useDisplay()
+  const { platform } = useDisplay()
   const { query } = useRoute()
   const user = useUserStore()
+  const one = useOneStore()
 
   const shouldLoad = shallowRef(false)
   const loading = shallowRef(false)
   const model = shallowRef(false)
   const searchString = shallowRef('')
 
+  const isMobile = computed(() => one.mobileBreakpoint.value)
+
   watch(shouldLoad, () => {
     loading.value = true
     model.value = true