From 0091cedb590d482c443efa9827fa1a8d2342ca96 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 18 Mar 2025 09:21:10 +0700
Subject: [PATCH] refactor: use expansion

---
 src/pages/00_manual/MainPage.vue | 35 ++++++++++++++++----------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/pages/00_manual/MainPage.vue b/src/pages/00_manual/MainPage.vue
index 334bcf7d..f0bf7b20 100644
--- a/src/pages/00_manual/MainPage.vue
+++ b/src/pages/00_manual/MainPage.vue
@@ -10,6 +10,7 @@ import { useRouter } from 'vue-router';
 
 import { useManualStore } from 'src/stores/manual';
 import { useNavigator } from 'src/stores/navigator';
+import Expansion from 'src/components/14_report/Expansion.vue';
 
 // NOTE: Variable
 const manualStore = useManualStore();
@@ -37,25 +38,23 @@ onMounted(async () => {
   <div
     class="column full-height no-wrap surface-1 rounded bordered overflow-hidden q-pa-sm"
   >
-    <section class="scroll">
-      <template v-for="v in dataManual">
-        <q-item clickable dense class="items-center rounded">
-          {{ v.label }}
-        </q-item>
-        <template v-if="v.page">
-          <div class="q-pl-md">
-            <q-item
-              v-for="x in v.page"
-              clickable
-              dense
-              class="dot items-center rounded"
-              @click="() => navigateTo(`/manual/${v.category}/${x.name}`)"
-            >
-              {{ x.label }}
-            </q-item>
-          </div>
+    <section class="scroll q-gutter-y-sm">
+      <Expansion v-for="v in dataManual">
+        <template #header>
+          {{ $i18n.locale === 'eng' ? v.labelEN : v.label }}
         </template>
-      </template>
+        <template #main>
+          <q-item
+            v-for="x in v.page"
+            clickable
+            dense
+            class="dot items-center rounded"
+            @click="() => navigateTo(`/manual/${v.category}/${x.name}`)"
+          >
+            {{ $i18n.locale === 'eng' ? x.labelEN : x.label }}
+          </q-item>
+        </template>
+      </Expansion>
     </section>
   </div>
 </template>