From 7a99ad188737ab610eae362e864a568197c28f51 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 19 Apr 2022 13:50:54 +0200
Subject: [PATCH] Change drawer state

---
 src/components/Navbar.vue                |  9 ++++-----
 src/composables/useState.js              |  3 +++
 src/layouts/MainLayout.vue               | 13 ++-----------
 src/pages/Customer/Card/CustomerCard.vue |  9 +++++++--
 src/pages/Customer/CustomerMain.vue      |  5 +++--
 src/pages/Dashboard/Dashboard.vue        |  8 +++++---
 6 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d25fe43a2..778fda213 100644
--- a/src/components/Navbar.vue
+++ b/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">
diff --git a/src/composables/useState.js b/src/composables/useState.js
index 2f182d651..78ff4257f 100644
--- a/src/composables/useState.js
+++ b/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
     };
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 2bb425ab1..9ba7063a4 100644
--- a/src/layouts/MainLayout.vue
+++ b/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>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 5d5b3ac0d..452ecb9dd 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/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>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index f27c822cb..731ebb803 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/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"
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index 3b2fa8013..28bad6e1a 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/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"