After adjusting my browser window to a mobile size in order to display the toolbar icon of the navigation-drawer, I encountered an issue. Clicking the toolbar icon caused the navigation-drawer to appear, but when I reverted the browser back to 100% size, the navigation-drawer did not disappear and became permanent. Consequently, I was unable to close the drawer anymore since the toolbar only appears in the mobile window, which should have closed upon resizing back to desktop size.
Below is the template used:
<template>
<div>
<v-navigation-drawer
v-model="sideNav.model"
absolute
overflow
disable-resize-watcher
disable-route-watcher
left
persistent
:app="sideNav.type = ''"
>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>supervisor_account</v-icon>
</v-list-tile-action>
<v-list-tile-content>Login</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app dark class="primary" >
<v-toolbar-side-icon
@click.stop="sideNav.model = !sideNav.model" class="hidden-sm-and-up"
></v-toolbar-side-icon>
<v-toolbar-title>DevMeetup</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn flat router :to="{name : 'Home'}">
<v-icon left dark>supervisor_account</v-icon>
Home
</v-btn>
<v-btn flat router :to="{name : 'Login'}" >
<v-icon left dark>supervisor_account</v-icon>
Login
</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
</main>
</div>
</template>
<script>
export default {
data : () => ({
sideNav: {
model: false,
type: 'persistent',
clipped: false,
floating: false,
mini: false,
stateless:true
},
isMobile: false
}),
mounted(){
}
}
</script>