refactor: use expansion

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>