From 5a03f88b24c323341846f1b37d3911c1eb9b5fa3 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 2 Apr 2024 11:39:10 +0700
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20border?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DrawerComponent.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 194b3e09..02d0d1a0 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -36,11 +36,13 @@ const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
         :key="v.label"
         clickable
         @click="currentRoute = v.label"
+        class="no-padding"
         :class="{ active: currentRoute === v.label, dark: $q.dark.isActive }"
       >
-        <q-item-section id="btn-drawer-back " class="test">
-          <q-item-label>
+        <q-item-section id="btn-drawer-back " style="border: 10px">
+          <q-item-label class="q-pl-lg">
             <!-- <q-icon :name="v.icon" size="sm" class="q-mr-xs" /> -->
+            <div class="box-border-left" />
             {{ v.label }}
           </q-item-label>
         </q-item-section>
@@ -52,14 +54,12 @@ const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
 <style lang="scss" scoped>
 #drawer-menu :deep(.q-item) {
   color: var(--gray-6);
-
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 #drawer-menu :deep(.q-item.active) {
   --_drawer-item-background-color: var(--brand-1) !important;
   background-color: var(--_drawer-item-background-color) !important;
-
   color: white;
   border-left: 10px solid $secondary;
 
@@ -67,10 +67,14 @@ const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
     --_drawer-item-background-color: var(--gray-10) !important;
     border: 1px solid var(--brand-1);
     border-left: 10px solid $secondary;
+    .box-border-left {
+      position: absolute;
+      width: 10px;
+      background: $secondary;
+      height: 48.5px;
+      top: -1px;
+      left: -10px;
+    }
   }
 }
-
-.test {
-  border: 1px solid blue;
-}
 </style>

From e88af6db9609fbb35f9ae1c157291b7e96bc71da Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 2 Apr 2024 12:51:00 +0700
Subject: [PATCH 2/2] =?UTF-8?q?feat:=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DrawerComponent.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 02d0d1a0..91fc8ede 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -6,10 +6,17 @@ const labelMenu: {
   label: string;
   icon: string;
 }[] = [
-  { label: 'Dashboard', icon: 'file-account-outline' },
-  { label: 'จัดการสาขา', icon: 'add' },
-  { label: 'จัดการผู้ใช้งาน', icon: 'add' },
-  { label: 'จัดการหลักสูตร', icon: 'add' },
+  { label: 'Dashboard', icon: 'mdi-folder-arrow-left' },
+  { label: 'จัดการสาขา', icon: 'mdi-folder-arrow-left' },
+  { label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline' },
+  { label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline' },
+  { label: 'สินค้าและบริการ', icon: 'mdi-folder-arrow-left' },
+  { label: 'ใบเสนอราคา', icon: 'mdi-folder-arrow-left' },
+  { label: 'รายการคำขอ', icon: 'mdi-folder-arrow-left' },
+  { label: 'ใบสั่งงาน', icon: 'mdi-folder-arrow-left' },
+  { label: 'ใบรับสินค้า', icon: 'mdi-folder-arrow-left' },
+  { label: 'รายการทางบัญชี', icon: 'mdi-account-cash-outline' },
+  { label: 'รายงาน', icon: 'mdi-file-chart-outline' },
 ];
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
@@ -41,8 +48,9 @@ const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
       >
         <q-item-section id="btn-drawer-back " style="border: 10px">
           <q-item-label class="q-pl-lg">
-            <!-- <q-icon :name="v.icon" size="sm" class="q-mr-xs" /> -->
             <div class="box-border-left" />
+            <q-icon :name="v.icon" size="sm" class="q-mr-xs" />
+
             {{ v.label }}
           </q-item-label>
         </q-item-section>