From 4eba85930173fec3ed932fdf09ced5a677d7a095 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 18 Mar 2025 09:58:24 +0700
Subject: [PATCH] refactor: spacing

---
 src/pages/00_manual/MainPage.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/pages/00_manual/MainPage.vue b/src/pages/00_manual/MainPage.vue
index 529908b9..1db62ed4 100644
--- a/src/pages/00_manual/MainPage.vue
+++ b/src/pages/00_manual/MainPage.vue
@@ -2,7 +2,6 @@
 // NOTE: Library
 import { storeToRefs } from 'pinia';
 import { onMounted } from 'vue';
-import { useRouter } from 'vue-router';
 
 // NOTE:  Components
 
@@ -10,24 +9,18 @@ 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';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
 // NOTE: Variable
 const manualStore = useManualStore();
 const navigatorStore = useNavigator();
 const { dataManual } = storeToRefs(manualStore);
-const router = useRouter();
 
 async function fetchManual() {
   const res = await manualStore.getManual();
   dataManual.value = res ? res : [];
 }
 
-function navigateTo(path: string) {
-  router.push(`${path}`);
-}
-
 onMounted(async () => {
   navigatorStore.current.title = 'menu.manual.title';
   navigatorStore.current.path = [{ text: '' }];
@@ -40,7 +33,12 @@ onMounted(async () => {
     class="column full-height no-wrap surface-1 rounded bordered overflow-hidden q-pa-sm"
   >
     <section class="scroll q-gutter-y-sm">
-      <q-expansion-item v-for="v in dataManual" :content-inset-level="1">
+      <q-expansion-item
+        v-for="v in dataManual"
+        :content-inset-level="0.5"
+        class="rounded overflow-hidden bordered"
+        dense
+      >
         <template #header>
           <div class="row items-center full-width">
             <Icon
@@ -52,12 +50,13 @@ onMounted(async () => {
             {{ $i18n.locale === 'eng' ? v.labelEN : v.label }}
           </div>
         </template>
+
         <q-item
           v-for="x in v.page"
           clickable
           dense
-          class="dot items-center rounded"
-          @click="() => navigateTo(`/manual/${v.category}/${x.name}`)"
+          class="dot items-center rounded q-my-xs"
+          :to="`/manual/${v.category}/${x.name}`"
         >
           <Icon
             v-if="!!x.icon"