CODEWITHSUNDEEP
vuejs2vuetify.js
mikeb
mikeb

Reputation: 11267

v-naigation-drawer hides on small screen with no hamburger menu or anything to get it back

Using vuetify and have a layout like:

<v-app id="inspire">
    <v-system-bar app>
      <v-spacer></v-spacer>
      <Clock/>
    </v-system-bar>
    <v-navigation-drawer
      v-model="drawer" app
  >
  ...
  </v-navigation-drawer>
  ...

Using vue 2, with router and no vuex yet.

My problem is that when my browser window gets narrow the drawer hides but there is no hamburger icon to click to get it back.

How do I make it so that it toggles on smaller screens, instead of just disappearing altogether?

Upvotes: 1

Views: 789

Answers (1)

Ricardo van Laarhoven
Ricardo van Laarhoven

Reputation: 788

The navigation drawer is nothing more then the sidebar itself. You could add a prop disable-resize-watcher to disable this functionality.

When you want to trigger the state of the navigation drawer you can use v-model to open and close the navigation drawer for example add v-model="menuIsOpen" to your navigation drawer and add @click="menuIsOpen = !menuIsOpen" to a button to make that trigger the navigation drawer.

Upvotes: 2

Related Questions