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

View File

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