From 9126270de698b3753290b1b5cbd6c150771c7541 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 11:28:51 +0700
Subject: [PATCH] refactor: update drawer

---
 src/components/DrawerComponent.vue | 22 ++++++++--------------
 src/layouts/MainLayout.vue         | 12 ++++++------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 6eec764c..c2fc460a 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 
@@ -94,20 +94,14 @@ function navigateTo(label: string, destination: string) {
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
-    :width="$q.screen.lt.md ? 200 : 300"
+    :width="$q.screen.lt.md ? 200 : 256"
   >
-    <div class="main-bar">
-      <div
-        class="column items-center justify-center q-pa-xl cursor-pointer"
-        @click="$router.push('/')"
-        id="btn-drawer-home"
-      >
-        <q-img src="/logo.png" style="width: 70%; height: 70%">
-          <template #error>
-            <img src="/logo.png" alt="" width="100%" />
-          </template>
-        </q-img>
-      </div>
+    <div
+      class="column items-center justify-center q-pa-xl cursor-pointer"
+      @click="$router.push('/')"
+      id="btn-drawer-home"
+    >
+      <q-img src="/logo.png" style="width: 80%; height: 70%" />
     </div>
 
     <div id="drawer-menu" class="q-pr-sm">
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 59098bc8..1f57612a 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -169,13 +169,13 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
+    <drawer-component v-model:left-drawer-open="leftDrawerOpen" />
 
-    <q-page-container class="surface-1 q-pa-md">
+    <q-page-container>
       <!-- drawer control -->
       <div
-        style="position: relative"
-        :style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 10'"
+        style="position: relative; z-index: 9999"
+        :hidden="$q.screen.lt.md && leftDrawerOpen"
       >
         <q-avatar
           size="36px"
@@ -209,8 +209,8 @@ onMounted(async () => {
       </div>
 
       <div
-        class="surface-3 bordered rounded q-pb-lg scroll column"
-        style="height: calc(100vh - 32px); flex-wrap: nowrap"
+        class="surface-3 rounded q-pb-lg scroll column"
+        style="height: 100vh; flex-wrap: nowrap"
       >
         <!-- header -->
         <div