feat(docs): improve responsive App Bar

Author: oumoussa98

packages/docs/src/components/app/Btn.vue

@@ -1,7 +1,6 @@
 <template>
   <v-btn
     :icon="!!icon"
-    :size="smAndUp ? 'default' : 'small'"
     :variant="variant"
     class="text-body-2 text-capitalize px-3 app-btn"
     color="medium-emphasis"
@@ -30,6 +29,5 @@
     },
   })
 
-  const { smAndUp } = useDisplay()
   const { t } = useI18n()
 </script>

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

@@ -5,51 +5,69 @@
     class="px-md-3"
     logo="vuetify"
     flat
+    responsive
+    v-model:mobile-menu="app.mobileMenu"
   >
-    <template #prepend>
-      <div class="px-1" />
-
+    <template #menu-activator="activatorProps">
       <AppBtn
-        v-if="route.meta.layout !== 'home' && mdAndDown"
-        icon="mdi-menu"
-        @click="app.drawer = !app.drawer"
+        v-bind="activatorProps"
+        icon="mdi-dots-vertical"
       />
+    </template>
 
+    <template #prepend>
       <AppSearchSearch />
     </template>
 
+    <template  #prepend-fixed>
+        <AppBtn
+          v-if="route.meta.layout !== 'home'"
+          icon="mdi-menu"
+          class="ms-2"
+          @click="app.drawer = !app.drawer"
+      />
+    </template>
+
     <template #append>
-      <div v-if="mdAndUp" class="d-flex ga-1">
+      <div class="d-flex ga-1 flex-wrap">
         <AppBarLearnMenu />
 
         <AppBarSupportMenu />
 
         <AppBarEcosystemMenu />
 
-        <AppBarPlaygroundLink v-if="lgAndUp" />
+        <AppBarPlaygroundLink />
 
         <AppBarSponsorLink />
       </div>
+      
+      <AppVerticalDivider v-if="!mobile"/>
 
-      <AppVerticalDivider v-if="smAndUp" />
+      <div class="d-flex ga-1" :class="{ 'mt-4': mobile }">
+        <AppBarStoreLink />
 
-      <div class="d-flex ga-1">
-        <AppBarStoreLink v-if="smAndUp" />
+        <AppBarGitHubLink />
 
-        <AppBarGitHubLink v-if="smAndUp" />
+        <template v-if="!mobile || xs">
+          <AppBarLanguageMenu />
 
-        <AppBarLanguageMenu />
+          <AppBarSettingsToggle />
+        </template>
+      </div>
+
+    </template>
 
+    <template v-if="mobile && !xs" #append-fixed>
+        <AppBarLanguageMenu />
         <AppBarSettingsToggle />
-      </div>
     </template>
+
   </VoAppBar>
 </template>
 
 <script setup>
   const app = useAppStore()
-  const { smAndUp, lgAndUp, mdAndDown, width } = useDisplay()
   const route = useRoute()
 
-  const mdAndUp = computed(() => width.value >= 1077)
+  const { mobile, xs } = useDisplay()
 </script>

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

@@ -17,7 +17,6 @@
     v-else
     id="settings-toggle"
     :icon="app.settings ? 'mdi-cog' : 'mdi-cog-outline'"
-    class="me-n2"
     color="medium-emphasis"
     @click="onClick"
   />
@@ -32,5 +31,6 @@
     sweClick('app-bar', 'settings-toggle', name)
 
     app.settings = !app.settings
+    app.mobileMenu = false
   }
 </script>

packages/docs/src/components/app/menu/Menu.vue

@@ -3,7 +3,8 @@
     close-delay="100"
     location="bottom end"
     open-delay="60"
-    open-on-hover
+    :open-on-hover="!mobile"
+    :open-on-click="mobile"
   >
     <template #activator="{ props }">
       <slot name="activator" v-bind="{ props }" />
@@ -12,7 +13,7 @@
     <AppSheet>
       <slot v-if="$slots.default" />
 
-      <AppListList v-else :items="items" nav />
+      <AppListList v-else :items="items" nav :max-height="mobile ? 400 : undefined" />
     </AppSheet>
   </v-menu>
 </template>
@@ -28,4 +29,6 @@
       default: () => ([]),
     },
   })
+
+  const { mobile } = useDisplay()
 </script>

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

@@ -1,25 +1,19 @@
 <template>
   <AppBtn
     :active="model"
-    :icon="xs ? 'mdi-magnify' : undefined"
     :loading="loading ? 'primary' : undefined"
-    :prepend-icon="smAndUp ? 'mdi-magnify' : undefined"
+    prepend-icon="mdi-magnify"
+    :block="mobile"
+    :variant="mobile ? 'tonal' : undefined"
+    :class="{'ms-2': !mobile}"
+    size="default"
     @click="shouldLoad = true"
   >
-    <span :class="mdAndUp && 'me-n1'">
-      <span v-if="smAndUp">
-        {{ t('search.label') }}
-      </span>
+    <span class="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="!mobile" class="py-1 px-2 ms-2 border rounded text-disabled text-caption">
           {{ t(`search.key-hint${user.slashSearch ? '-slash' : platform.mac ? '-mac' : ''}`) }}
-        </span>
       </span>
     </span>
 
@@ -38,7 +32,7 @@
   const SearchDialog = defineAsyncComponent(() => import('@/components/app/search/SearchDialog.vue'))
 
   const { t } = useI18n()
-  const { smAndUp, smAndDown, mdAndUp, xs, platform } = useDisplay()
+  const { platform, mobile } = useDisplay()
   const { query } = useRoute()
   const user = useUserStore()
 

packages/docs/src/plugins/vuetify.ts

@@ -25,6 +25,9 @@ import type { IconProps } from 'vuetify'
 
 export function installVuetify (app: App) {
   const vuetify = createVuetify({
+    display: {
+      mobileBreakpoint: 'lg',
+    },
     components: {
       VSnackbarQueue,
     },

packages/docs/src/stores/app.ts

@@ -37,6 +37,7 @@ export const useAppStore = defineStore('app', {
     items: Array.from(data),
     pages: getPages(data as NavItem[]),
     settings: false,
+    mobileMenu: false,
     categories: {
       api: {
         icon: 'mdi-flask-outline',