Hide vuetify navigation drawer - vuetify.js

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?

Answer 1

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>