Load website with v-navigation-drawer closed

Question

Is it possible to load the website with the Navigation Drawer closed and open just after the click, like a mobile menu?

I am using Vuetify:

<template>
  <v-app toolbar--fixed toolbar footer>
    <v-navigation-drawer
    temporary
    v-model="sideNav"
    enable-resize-watcher
    disable-route-watcher
    right
    dark
    absolute>
      <v-list dense>
        <v-list-tile
          v-for="item in menuItems"
          :key="item.title"
          router
          :to="item.link">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content class="sidemenu-item">{{ item.title }}</v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar dark class="blue-grey darken-4">
      <v-toolbar-title>
        <router-link to="/" tag="span" style="cursor: pointer">
          <img class="logo" src="static/images/main_logo.png" alt="">
        </router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon
        @click.stop="sideNav = !sideNav"></v-toolbar-side-icon>
    </v-toolbar>
    <main>
      <router-view></router-view>
    </main>
    <v-footer class="blue-grey darken-4 main-footer">
      <span class="white--text main-footer">© {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        sideNav: true,
        menuItems: [
          { icon: 'home', title: 'Home', link: '/' },
          { icon: 'fast_forward', title: 'Sign Up', link: '/signup' },
          { icon: 'business', title: 'About', link: '/About' },
          { icon: 'mail', title: 'Contact', link: '/contact' }
        ]
      }
    }
  }
</script>

Now when the application is loaded it appears open on big screens and closed on small screens. I'd like that this menu has the same behaviour on small and big screens: always closed and open just when the user clicks on the hamburger menu.

Answer 1

There is a way. You could simply use the drawer prop like drawer="false" to diable it. But of course you need then a way to activate it. See the code below.

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" fixed app >
    ...
    </v-navigation-drawer>

    <v-toolbar fixed app :clipped-left="clipped"  dark color="primary">
          <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
    </v-toolbar>      
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        drawer: false
      }
    }
  }
</script>

Answer 2

Another way is to add the stateless property. Combine it with the hide-overlay property so you can still use the drawer on mobile.