restore drawer toggle in docs

This commit is contained in:
Jonathan Shook 2020-09-16 18:13:45 -05:00
parent a413b49a97
commit 238a5f02fa
2 changed files with 20 additions and 11 deletions

View File

@ -2,10 +2,10 @@
<v-navigation-drawer app
v-model="isDrawerOpen"
:permanent="isMenuLocked"
@transitionend="toggleDrawerOpened"
@transitionend="afterMenuTransition"
:title="drawerTitle">
<div class="menu">
<div class="menu" >
<!-- active_category: {{ active_category.name }} active_topic: {{ active_topic.name }}-->
<!-- Use active_category and active_topic to select inactive -->
@ -17,7 +17,7 @@
<!-- <v-list-item v-if="$vuetify.breakpoint.mdAndDown">-->
<v-list-item-action>
<v-switch inset v-model="isMenuLocked" label="keep open"
@change="toggleMenuLocked"></v-switch>
@click="toggleMenuLocked"></v-switch>
</v-list-item-action>
</v-list-item>
@ -87,14 +87,13 @@ export default {
this.$store.dispatch("docs/setActiveTopic", topic)
this.$nuxt.$router.push({path: topic.path})
},
toggleDrawerOpened() {
afterMenuTransition() {
this.drawer = !this.drawer;
console.log("drawer now " + (this.drawer ? "true" : "false"))
},
toggleMenuLocked() {
this.$store.dispatch("docs/setIsMenuLocked", !this.$store.getters["docs/getIsMenuLocked"])
},
setIsDrawerOpen() {
this.$store.commit('docs/setIsDrawerOpen', this.drawer);
}
},
async created() {

View File

@ -6,7 +6,7 @@
:active_topic="active_topic"
:categories="categories"
@change="menuChanged()"
@select="menuChanged()"></docs-menu>
@select="menuChanged()"></docs-menu>
<v-app-bar app collapse-on-scroll dense>
<v-app-bar-nav-icon @click.stop="toggleDrawer"/>
@ -77,13 +77,21 @@ export default {
async set(val) {
await this.$store.dispatch("docs/setActiveTopic")
}
},
isDrawerOpen: {
get() {
return this.$store.getters["docs/getIsDrawerOpen"]
},
set(val) {
this.$store.dispatch("docs/setIsDrawerOpen", val)
}
}
},
async asyncData({params, route, store}) {
await store.dispatch("docs/loadCategories")
let categories = await store.getters["docs/getCategories"]
let active_category =docpaths.getCategory(route,categories);
let active_topic = docpaths.getTopic(route,categories, active_category);
let active_category = docpaths.getCategory(route, categories);
let active_topic = docpaths.getTopic(route, categories, active_category);
return {
active_category,
@ -93,7 +101,9 @@ export default {
},
methods: {
async toggleDrawer() {
await this.$store.dispatch("docs/setIsDrawerOpen", this.$store.getters["docs/getIsDrawerOpen"])
this.isDrawerOpen=!this.isDrawerOpen;
// await this.$store.dispatch("docs/setIsDrawerOpen", this.$store.getters["docs/getIsDrawerOpen"])
console.log("toggled drawer, now " + this.isDrawerOpen)
},
menuChanged(evt) {
console.log("menu changed:" + JSON.stringify(evt, null, 2))