Hide vuetify navigation drawer

user_253944 0
Viewed 3290

I'm trying to hide the navigation drawer if the display is equal to or larger than md using the class in the following code with no luck:

<template>
 <v-app>
   <v-navigation-drawer
     v-model="drawer"
     class="hidden-md-and-up"
     :mini-variant="miniVariant"
     :clipped="clipped"
     fixed
     app
   >
     <v-list class="hidden-md-and-up">
       <v-list-item
         v-for="(item, i) in items"
         :key="i"
         :to="item.to"
         router
         exact
       >
         <v-list-item-action>
           <v-icon>{{ item.icon }}</v-icon>
         </v-list-item-action>
         <v-list-item-content>
           <v-list-item-title v-text="item.title" />
         </v-list-item-content>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>

What am I missing?

vuetify.js
1 Answers

One option is to use the vuetify breakpoint on the permanent prop of v-navigation-drawer since you want it to permanently appear in all but medium and larger.

https://vuetifyjs.com/en/features/breakpoints/

Replace class="hidden-md-and-up" with :permanent="!$vuetify.breakpoint.mdAndUp" and the "!" since you want it to not show for mdAndUp.

<template>
 <v-app>
  <v-navigation-drawer
   v-model="drawer"
   :permanent="!$vuetify.breakpoint.mdAndUp"
   :mini-variant="miniVariant"
   :clipped="clipped"
   fixed
   app
  >
 <v-list class="hidden-md-and-up">
   <v-list-item
     v-for="(item, i) in items"
     :key="i"
     :to="item.to"
     router
     exact
   >
     <v-list-item-action>
       <v-icon>{{ item.icon }}</v-icon>
     </v-list-item-action>
     <v-list-item-content>
       <v-list-item-title v-text="item.title" />
     </v-list-item-content>
   </v-list-item>
 </v-list>
user_20549780
Related