fix: แก้ไข border

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>