'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?

vuejs2vuetify.js


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ricardo van Laarhoven

Related Questions