From 6c170436c226d52284ec5e938943cf0ef2891cdf Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 10:39:54 +0000
Subject: [PATCH] fix: left drawer responsive

---
 src/components/DrawerComponent.vue |  4 ++--
 src/layouts/MainLayout.vue         | 35 ++++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index c010d1af..36001796 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -97,6 +97,7 @@ function branchSetting() {}
 <template>
   <!-- Drawer -->
   <q-drawer
+    no-swipe-open
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
@@ -222,8 +223,7 @@ function branchSetting() {}
 
 :deep(.q-drawer) {
   transition: 0.1s width ease-in-out;
-
-  background-color: var(--surface-0);
+  background-color: transparent;
   padding: var(--size-4);
   padding-right: 0;
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 41b07557..0659200b 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -41,7 +41,10 @@ const userStore = useUserStore();
 
 const rawOption = ref();
 const canvasModal = ref(false);
+
 const leftDrawerOpen = ref(true);
+const leftDrawerMini = ref(false);
+
 const filterUnread = ref(false);
 const unread = ref<number>(1);
 // const filterRole = ref<string[]>();
@@ -169,14 +172,14 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <drawer-component :mini="!leftDrawerOpen" />
+    <drawer-component
+      :mini="leftDrawerMini"
+      v-model:left-drawer-open="leftDrawerOpen"
+    />
 
     <q-page-container>
       <!-- drawer control -->
-      <div
-        style="position: relative; z-index: 1000"
-        :hidden="$q.screen.lt.md && leftDrawerOpen"
-      >
+      <div style="position: relative; z-index: 1000" :hidden="$q.screen.lt.sm">
         <div
           size="36px"
           style="
@@ -200,10 +203,10 @@ onMounted(async () => {
               background-color: hsl(var(--negative-bg) / 0.1);
               overflow: hidden;
             "
-            @click="leftDrawerOpen = !leftDrawerOpen"
+            @click="leftDrawerMini = !leftDrawerMini"
           >
             <q-icon
-              :name="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
+              :name="!leftDrawerMini ? 'mdi-backburger' : 'mdi-forwardburger'"
               size="16px"
               style="color: hsl(var(--negative-bg))"
             />
@@ -217,9 +220,23 @@ onMounted(async () => {
       >
         <!-- header -->
         <div
-          class="q-px-lg surface-0 row items-center justify-between q-pb-md q-pt-lg"
+          class="q-px-lg surface-0 row items-center justify-start q-pb-md q-pt-lg"
           style="position: sticky; top: 0; z-index: 8"
         >
+          <q-btn
+            v-if="$q.screen.lt.sm"
+            icon="mdi-menu"
+            flat
+            dense
+            rounded
+            class="q-mr-md"
+            @click="
+              () => {
+                leftDrawerMini = false;
+                leftDrawerOpen = !leftDrawerOpen;
+              }
+            "
+          />
           <div class="column">
             <span
               class="title-gradient text-weight-bold"
@@ -245,7 +262,7 @@ onMounted(async () => {
             </span>
           </div>
 
-          <div class="row q-gutter-x-md items-center">
+          <div class="row q-gutter-x-md items-center" style="margin-left: auto">
             <!-- notification -->
             <q-btn
               round