Merge branch 'dev/net' into develop

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', {
@@ -36,11 +43,14 @@ 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-icon :name="v.icon" size="sm" class="q-mr-xs" /> -->
+        <q-item-section id="btn-drawer-back " style="border: 10px">
+          <q-item-label class="q-pl-lg">
+            <div class="box-border-left" />
+            <q-icon :name="v.icon" size="sm" class="q-mr-xs" />
+
             {{ v.label }}
           </q-item-label>
         </q-item-section>
@@ -52,14 +62,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 +75,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>