Globally Hide or Show Left Drawer on MainLayout Page

[QuaSam]

Objective: Hide or show the Home Page left drawer globally from components no matter how deeply nested the component is. Searching the web and the Forum for a solution took quite a while and did not end with a solution, although hints were made by some. The solution presented here is pretty basic, but it seems to me that this requirement would exist so broadly that a somewhat standard solution using the Vuex store, with minimal change to the Quasar create template, would be a good idea. Basically set up leftDrawerOpen as a global state variable. Steps are below:
In Vuex, define the following (I would suggest st, mu, ac and gt as prefixes for state, mutation, action, getter):
stLeftDrawerOpen in Vuex state
muLeftDrawerOpen as mutation to commit the value
acLeftDrawerOpen as action to set it with some logic (see below) to either toggle the drawer or set hide or shown
gtLeftDrawerOpen as getter

Then in MainLayout.vue change:
<q-drawer :width="250" v-model="leftDrawerOpen" bordered content-class="bg-grey-w">
To
<q-drawer :width="250" v-model="gtLeftDrawerOpen" bordered content-class="bg-grey-w">

In data: remove this from the Quasar created file:
leftDrawerOpen: this.$q.platform.is.desktop,

Instead, add a step in MainLayout.vue mounted:
const dwr = (this.$q.platform.is.desktop) ? ‘on’ : ‘off’
this.acSetLeftDrawerOpen(dwr)

Change the MainLayout.vue code for the three-bar icon:
<q-toolbar>
<q-btn flat round dense icon="menu" @click="leftDrawerOpen = !leftDrawerOpen" />
to point the click operation to the Vuex action:
<q-btn flat round dense icon="menu" @click="acSetLeftDrawerOpen('')" />

Vuex action code:
acSetLeftDrawerOpen( {commit}, obj) {
// Contol the home page left drawer - obj = '' toggle, 'on'/'off' to show/hide
let newState = true
if (obj === 'on') {
newState = true
} else if (obj === 'off') {
newState = false
} else {
newState = !state.stLeftDrawerOpen
}
commit('muSetLeftDrawerOpen', newState)
},

[stn-swz]

This post is deleted!

[dobbel]

@QuaSam thanks for the contribution. Tip for code blocks you can use ``` in your comments for code highlighting( will make it more readable):

<q-drawer :width=“250” v-model=“gtLeftDrawerOpen” bordered content-class=“bg-grey-w”>

[QuaSam]

@dobbel Thanks! I have added ‘’’ to the text, but it is not producing the effect you are showing. Any further steps needed to make it work?

[dobbel]

@QuaSam Almost! You have to use the backtick chars ``` instead of single quote chars. It’s the most upper left on the keyboard ( if you have a ‘normal’ qwerty).