feat: mini-drawer

src/components/DrawerComponent.vue

@@ -3,6 +3,10 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 
+defineProps<{
+  mini?: boolean;
+}>();
+
 const router = useRouter();
 
 const currentRoute = ref<string>('');
@@ -79,7 +83,7 @@ const labelMenu = ref<
 ]);
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
-  default: false,
+  default: true,
 });
 
 function navigateTo(label: string, destination: string) {
@@ -96,30 +100,33 @@ function branchSetting() {}
     v-model="leftDrawerOpen"
     side="left"
     :breakpoint="599"
-    :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
     class="column justify-between no-wrap"
+    :width="mini ? 110 : 256"
   >
-    <div class="scroll">
+    <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
+    <div class="scroll" style="overflow-x: hidden">
       <div
-        class="flex justify-center q-pa-xl cursor-pointer"
+        class="flex justify-center items-center q-pa-md cursor-pointer"
         @click="$router.push('/')"
         id="btn-drawer-home"
+        style="height: 128px"
       >
         <q-img
-          src="/logo.png"
+          fit="contain"
-          style="width: 80%; height: 70%"
+          :src="mini ? 'logo_jws.png' : '/logo.png'"
           :style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
+          style="height: 64px"
         />
       </div>
 
-      <div id="drawer-menu" class="q-pr-sm q-pl-md">
+      <div id="drawer-menu" class="q-px-md">
         <q-item
           v-for="v in labelMenu"
           dense
-          :key="v.label"
           clickable
+          class="row items-center q-my-xs"
+          :key="v.label"
           :disable="!!v.disabled"
-          class="no-padding q-my-xs"
           :class="{
             active: currentPath === v.route,
             'border-active': currentPath === v.route,
@@ -127,50 +134,62 @@ function branchSetting() {}
           }"
           @click="navigateTo(v.label, v.route)"
         >
-          <q-item-section id="btn-drawer-back">
+          <div class="row justify-center items-center">
-            <q-item-label class="row items-center q-px-md">
+            <Icon :icon="v.icon" width="24px" />
-              <div class="box-border-left" />
+            <q-tooltip v-if="mini">
-              <Icon :icon="v.icon" width="24px" class="q-mr-md" />
               {{ $t(v.label) }}
-            </q-item-label>
+            </q-tooltip>
-          </q-item-section>
+          </div>
+
+          <div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
+            {{ $t(v.label) }}
+          </div>
         </q-item>
       </div>
     </div>
 
-    <div class="surface-2 q-px-md q-py-sm row justify-between items-center">
+    <div
-      <div class="flex q-gutter-x-md items-center">
+      class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
-        <q-avatar
+      :class="{ 'justify-center': mini }"
-          text-color="white"
+      style="min-height: 56px; overflow-x: hidden"
-          size="md"
+    >
-          style="background-color: var(--violet-1)"
+      <q-avatar
-          class="relative-position"
+        text-color="white"
-        >
+        size="md"
-          <q-icon
+        :style="`background-color: hsla(var(--violet-${$q.dark.isActive ? '10' : '11'}-hsl)/0.15)`"
-            name="mdi-home-group"
+        class="relative-position"
-            size="sm"
+      >
-            style="color: var(--violet-11)"
+        <q-icon
-          />
+          name="mdi-home-group"
-          <div class="dot absolute-bottom-right" />
+          size="sm"
-        </q-avatar>
+          :style="`color: var(--violet-${$q.dark.isActive ? '10' : '11'})`"
+        />
+        <div class="dot absolute-bottom-right" />
+      </q-avatar>
 
-        <div class="text-caption column">
+      <div
-          <span class="text-weight-bold">
+        v-if="!mini"
-            {{ 'ชื่อสาขาที่ 1' }}
+        class="text-caption column q-ml-sm"
-          </span>
+        style="white-space: nowrap"
-          <span>
+      >
-            {{ 'BR1001' }}
+        <span class="text-weight-bold">
-          </span>
+          {{ 'ชื่อสาขาที่ 1' }}
-        </div>
+        </span>
+        <span>
+          {{ 'BR1001' }}
+        </span>
       </div>
+
       <q-btn
+        v-if="!mini"
         dense
         flat
         rounded
         icon="mdi-cog-outline"
         size="sm"
         @click="branchSetting"
-      ></q-btn>
+        style="margin-left: auto"
+      />
     </div>
   </q-drawer>
 </template>
@@ -188,7 +207,22 @@ function branchSetting() {}
   // border-left: 10px solid $secondary;
 }
 
+#drawer-menu :deep(.q-item.active)::before {
+  display: block;
+  position: absolute;
+  content: ' ';
+  background: var(--brand-2);
+  border-radius: 99rem;
+  width: 6px;
+  left: -0.6rem;
+  top: 18%;
+  bottom: 18%;
+  cursor: context-menu;
+}
+
 :deep(.q-drawer) {
+  transition: 0.1s width ease-in-out;
+
   background-color: var(--surface-0);
   padding: var(--size-4);
   padding-right: 0;
@@ -199,19 +233,6 @@ function branchSetting() {}
   background: var(--surface-1);
 }
 
-#drawer-menu :deep(.q-item.active)::before {
-  display: block;
-  position: absolute;
-  content: ' ';
-  background: var(--brand-2);
-  border-radius: 99rem;
-  width: 6px;
-  left: -5%;
-  top: 18%;
-  bottom: 18%;
-  cursor: context-menu;
-}
-
 .dot {
   height: 10px;
   width: 10px;

src/layouts/MainLayout.vue

@@ -169,22 +169,25 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <drawer-component v-model:left-drawer-open="leftDrawerOpen" />
+    <drawer-component :mini="!leftDrawerOpen" />
 
     <q-page-container>
       <!-- drawer control -->
       <div
-        style="position: relative; z-index: 9999"
+        style="position: relative; z-index: 1000"
         :hidden="$q.screen.lt.md && leftDrawerOpen"
       >
-        <q-avatar
+        <div
           size="36px"
           style="
             position: absolute;
+            border-radius: 50%;
             top: 28px;
-            left: -18px;
+            left: -22px;
             background-color: var(--surface-1);
+            border: 4px solid var(--surface-1);
           "
+          class="flex items-center justify-center"
         >
           <q-btn
             flat
@@ -205,7 +208,7 @@ onMounted(async () => {
               style="color: hsl(var(--negative-bg))"
             />
           </q-btn>
-        </q-avatar>
+        </div>
       </div>
 
       <div