fix: drawer active and branch

src/components/DrawerComponent.vue

@@ -86,6 +86,8 @@ function navigateTo(label: string, destination: string) {
   currentRoute.value = label;
   router.push(`${destination}`);
 }
+
+function branchSetting() {}
 </script>
 
 <template>
@@ -95,33 +97,76 @@ function navigateTo(label: string, destination: string) {
     side="left"
     :breakpoint="599"
     :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
+    class="column justify-between no-wrap"
   >
-    <div
-      class="column items-center justify-center q-pa-xl cursor-pointer"
-      @click="$router.push('/')"
-      id="btn-drawer-home"
-    >
-      <q-img src="/logo.png" style="width: 80%; height: 70%" />
+    <div class="scroll">
+      <div
+        class="flex justify-center q-pa-xl cursor-pointer"
+        @click="$router.push('/')"
+        id="btn-drawer-home"
+      >
+        <q-img src="/logo.png" style="width: 80%; height: 70%" />
+      </div>
+
+      <div id="drawer-menu" class="q-pr-sm q-pl-md">
+        <q-item
+          v-for="v in labelMenu"
+          dense
+          :key="v.label"
+          clickable
+          :disable="!!v.disabled"
+          class="no-padding q-my-xs"
+          :class="{
+            active: currentPath === v.route,
+            'border-active': currentPath === v.route,
+            dark: $q.dark.isActive,
+          }"
+          @click="navigateTo(v.label, v.route)"
+        >
+          <q-item-section id="btn-drawer-back">
+            <q-item-label class="row items-center q-px-md">
+              <div class="box-border-left" />
+              <Icon :icon="v.icon" width="24px" class="q-mr-md" />
+              {{ $t(v.label) }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </div>
     </div>
 
-    <div id="drawer-menu" class="q-pr-sm">
-      <q-item
-        v-for="v in labelMenu"
-        :key="v.label"
-        clickable
-        :disable="!!v.disabled"
-        @click="navigateTo(v.label, v.route)"
-        class="no-padding"
-        :class="{ active: currentPath === v.route, dark: $q.dark.isActive }"
-      >
-        <q-item-section id="btn-drawer-back ">
-          <q-item-label class="q-pl-lg row items-center">
-            <div class="box-border-left" />
-            <Icon :icon="v.icon" width="24px" class="q-mr-md" />
-            {{ $t(v.label) }}
-          </q-item-label>
-        </q-item-section>
-      </q-item>
+    <div class="surface-2 q-px-md q-py-sm row justify-between items-center">
+      <div class="flex q-gutter-x-md items-center">
+        <q-avatar
+          text-color="white"
+          size="md"
+          style="background-color: var(--violet-1)"
+          class="relative-position"
+        >
+          <q-icon
+            name="mdi-home-group"
+            size="sm"
+            style="color: var(--violet-11)"
+          />
+          <div class="dot absolute-bottom-right" />
+        </q-avatar>
+
+        <div class="text-caption column">
+          <span class="text-weight-bold">
+            {{ 'ชื่อสาขาที่ 1' }}
+          </span>
+          <span>
+            {{ 'BR1001' }}
+          </span>
+        </div>
+      </div>
+      <q-btn
+        dense
+        flat
+        rounded
+        icon="mdi-cog-outline"
+        size="sm"
+        @click="branchSetting"
+      ></q-btn>
     </div>
   </q-drawer>
 </template>
@@ -129,28 +174,14 @@ function navigateTo(label: string, destination: string) {
 <style lang="scss" scoped>
 #drawer-menu :deep(.q-item) {
   color: var(--gray-6);
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-radius: var(--radius-2);
 }
 #drawer-menu :deep(.q-item.active) {
   --_drawer-item-background-color: var(--brand-1) !important;
   background-color: var(--_drawer-item-background-color);
   color: white;
-  border-left: 10px solid $secondary;
 
-  &.dark {
-    --_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;
-    }
-  }
+  // border-left: 10px solid $secondary;
 }
 
 :deep(.q-drawer) {
@@ -164,4 +195,26 @@ function navigateTo(label: string, destination: string) {
   background: var(--surface-1);
   border: 1px solid var(--border-color);
 }
+
+#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;
+  background-color: var(--teal-6);
+  border-radius: 50%;
+  display: inline-block;
+  border: 1.5px solid white;
+}
 </style>

src/css/app.scss

@@ -46,7 +46,7 @@ html {
 }
 
 :where(.dark, .body--dark) {
-  --brand-1: var(--blue-5);
+  --brand-1: #035aa1;
   --brand-2: #f50000;
   --border-color: var(--gray-7);
   --foreground: white;