Hide vuetify navigation drawer

Question

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?

user2054978 user2054978 · Accepted Answer · 2020-10-07T04:47:45

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>

Hide vuetify navigation drawer

1 Answers