Load website with v-navigation-drawer closed

Asked By: Anonymous

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.


Solution

Answered By: Anonymous

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>
techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno