Change drawer state

src/components/Navbar.vue

@@ -1,5 +1,3 @@
-
-
 <script setup>
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -10,14 +8,15 @@ const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 
-defineEmits(['toggle-drawer']);
-
+function onToggleDrawer() {
+    state.drawer.value = !state.drawer.value;
+}
 </script>
 
 <template>
     <q-header class="bg-dark" color="white" elevated bordered>
         <q-toolbar class="q-py-sm q-px-md">
-            <q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" />
+            <q-btn flat @click="onToggleDrawer()" round dense icon="menu" />
             <router-link to="/">
                 <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
                     <q-avatar square size="md">

src/composables/useState.js

@@ -8,6 +8,8 @@ const user = ref({
 
 const roles = ref([]);
 
+const drawer = ref(true);
+
 export function useState() {
     function getUser() {
         return computed(() => {
@@ -42,5 +44,6 @@ export function useState() {
         setUser,
         getRoles,
         setRoles,
+        drawer
     };
 }

src/layouts/MainLayout.vue

@@ -1,21 +1,12 @@
 <script setup>
-// import { ref } from 'vue';
 import Navbar from 'src/components/Navbar.vue';
-//import LeftMenu from 'src/components/LeftMenu.vue';
-// const drawer = ref(false);
-// const miniState = ref(true);
-
-// function onToggleDrawer() {
-//     drawer.value = !drawer.value;
-// }
 </script>
 
 <template>
     <q-layout view="hHh lpR fFf">
-        <Navbar @toggle-drawer="onToggleDrawer()" />
+        <Navbar />
         <router-view></router-view>
     </q-layout>
 </template>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/pages/Customer/Card/CustomerCard.vue

@@ -1,9 +1,14 @@
+<script setup>
+import { useState } from 'src/composables/useState';
+
+const state = useState();
+</script>
 <template>
-    <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
             <router-link :to="{ path: '/customer/list' }">
                 <q-icon name="arrow_back" size="md" color="primary" />
-            </router-link>Descriptor
+            </router-link>
         </q-scroll-area>
     </q-drawer>
     <q-page-container>

src/pages/Customer/CustomerMain.vue

@@ -1,14 +1,15 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
-const drawer = ref(false);
+const state = useState();
 const miniState = ref(true);
 </script>
 
 <template>
     <q-drawer
-        v-model="drawer"
+        v-model="state.drawer.value"
         show-if-above
         :mini="miniState"
         @mouseover="miniState = false"

src/pages/Dashboard/Dashboard.vue

@@ -1,16 +1,18 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
+const state = useState();
+const miniState = ref(true);
+
 const slide = ref('style');
 const slideText = 'Description text';
-const drawer = ref(false);
-const miniState = ref(true);
 </script>
 
 <template>
     <q-drawer
-        v-model="drawer"
+        v-model="state.drawer.value"
         show-if-above
         :mini="miniState"
         @mouseover="miniState = false"