CODEWITHSUNDEEP
vue.jsvuetify.js
cstrutton
cstrutton

Reputation: 6187

Why does the Vuetify navigation drawer fly out at large screen size? How do I prevent it from happening?

I have the following Vuetify toolbar with a navigation drawer. This my first attempt at building a Vue app with Vuetify At smaller screen sizes it behaves as expected. Once the screen width hits the large breakpoint (1264 px), the drawer flys out. Using Chrome Version 72.0.3626.109 (Official Build) (64-bit)

I can't find any reference to this being expected behavior in the docs let alone how to prevent it. Is there a simple way to stop this behavior?

My app.vue

<template>
  <v-app>
    <v-navigation-drawer v-model="sidebar" app>
    </v-navigation-drawer>
    <v-toolbar height=48 app>
      <v-toolbar-side-icon class="hidden-sm-and-up" @click="sidebar = !sidebar">
      </v-toolbar-side-icon>
      <v-toolbar-title>{{ appTitle }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn to="/" flat>Home</v-btn>
        <v-btn to="/about" flat>About</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>
<script>
  export default {
    data () {
      return {
        appTitle: 'VueTodo',
        sidebar: false
      }
    }
  }
</script>
<style>
</style>

Upvotes: 6

Views: 10411

Answers (3)

Sunil Chhatbar
Sunil Chhatbar

Reputation: 1

There is a significant role of app attribute in v-navigation-drawer. You can please remove it and check if you find it helpful.

Upvotes: 0

trueChazza
trueChazza

Reputation: 529

There is a prop to handle this exact behaviour disable-resize-watcher:

<v-navigation-drawer disable-resize-watcher v-model="sidebar" app>
</v-navigation-drawer>

https://vuetifyjs.com/en/components/navigation-drawers

Upvotes: 24

Gerhard Presser
Gerhard Presser

Reputation: 58

Try those changes:

<v-navigation-drawer v-model="sidebar" app temporary>
<v-toolbar-side-icon @click="sidebar = !sidebar">

Also you can check the documentation about it here: https://vuetifyjs.com/en/components/navigation-drawers#props

Upvotes: 2

Related Questions