I have created two separate components. One component uses v-navigation-drawer, while the other component contains a button that toggles the state of the v-navigation-drawer using vuex.
On smaller screens, when clicking on the gray area to close the navigation drawer, the state in vuex does not update as expected.
enter code here
drawer.vue
<template>
<v-navigation-drawer
fixed
:value="drawer"
app
:class="getSettingsTheme"
:mini-variant="mini"
>
<b>menu</b>
</v-navigation-drawer>
</template>
sitebar.vue
<template>
<v-toolbar fixed app clipped-right :class="getSettingsTheme">
<v-tooltip right>
<v-btn slot="activator" icon @click.stop="drawerMut">
<v-icon class="theme--light grey--text" color="grey lighten-1">menu</v-icon>
</v-btn>
<span>Show/Hide drawer</span>
</v-tooltip>
</v-toolbar>
</template>
vuex
export default new Vuex.Store({
state: {
drawer: true,
},
mutations: {
drawerMut(state) {
state.drawer = !state.drawer
}
},
getters: {
drawer(state) {
return state.drawer
},
}})