From 13974ff31348ad347bd2c08bdd01329b408d5620 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:52:31 +0700
Subject: [PATCH] feat: update sub side menu

---
 src/components/SideMenu.vue                   | 38 +++++++++++--------
 src/pages/03_customer-management/MainPage.vue |  1 +
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 244ae845..918ee778 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -7,6 +7,7 @@ type Menu = {
   element?: HTMLElement;
   anchor: string;
   name: string;
+  sub?: boolean;
 };
 
 const props = defineProps<{
@@ -76,21 +77,24 @@ onUnmounted(() => {
 
 <template>
   <div class="side-menu__container">
-    <span
-      :style="{
-        '--side-menu__fg': activeMenu !== v.anchor ? foreground : undefined,
-        '--side-menu__bg': activeMenu !== v.anchor ? background : undefined,
-        '--side-menu__fg-active': active?.foreground,
-        '--side-menu__bg-active': active?.background,
-      }"
-      class="side-menu__item"
-      :class="{ 'side-menu__active': activeMenu === v.anchor }"
-      v-for="v in menu"
-      :key="v.anchor"
-      @click="handleClick(v)"
-    >
-      {{ v.name }}
-    </span>
+    <template v-for="v in menu" :key="v.anchor">
+      <span
+        :style="{
+          '--side-menu__fg': activeMenu !== v.anchor ? foreground : undefined,
+          '--side-menu__bg': activeMenu !== v.anchor ? background : undefined,
+          '--side-menu__fg-active': active?.foreground,
+          '--side-menu__bg-active': active?.background,
+        }"
+        class="side-menu__item"
+        :class="{
+          'side-menu__active': activeMenu === v.anchor,
+          'side-menu__sub': v.sub || false,
+        }"
+        @click="handleClick(v)"
+      >
+        {{ v.name }}
+      </span>
+    </template>
   </div>
 </template>
 
@@ -109,6 +113,10 @@ onUnmounted(() => {
     border-radius: var(--radius-2);
     cursor: pointer;
 
+    &.side-menu__sub {
+      margin-left: 1rem;
+    }
+
     &.side-menu__active {
       --side-menu__fg: var(--side-menu__fg-active, inherit);
       --side-menu__bg: var(--side-menu__bg-active, inherit);
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 9dfadf52..93f4295e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1902,6 +1902,7 @@ watch(
                     name: v.branchNo || 0,
                   }),
                   anchor: `form-branch-customer-no-${v.branchNo}`,
+                  sub: true,
                 })) || []),
               ]"
               background="transparent"