feat: show sub tile of manual

src/pages/00_manual/MainPage.vue

@@ -1,28 +1,71 @@
 <script setup lang="ts">
 // NOTE: Library
 import { storeToRefs } from 'pinia';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 // NOTE:  Components
 
 // NOTE: Stores & Type
+
+import { Manual } from 'src/stores/manual/types';
 import { useManualStore } from 'src/stores/manual';
-import { onMounted } from 'vue';
+import { useNavigator } from 'src/stores/navigator';
 
 // NOTE: Variable
 const manualStore = useManualStore();
-
+const navigatorStore = useNavigator();
 const { dataManual } = storeToRefs(manualStore);
+const selectedManual = ref<string>('');
+const router = useRouter();
 
 async function fatchManual() {
   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: '' }];
   await fatchManual();
 });
 </script>
 
 <template>
-  <div></div>
+  <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(`${v.category}/${x.name}`)"
+            >
+              {{ x.label }}
+            </q-item>
+          </div>
+        </template>
+      </template>
+    </section>
+  </div>
 </template>
+
+<style scoped>
+.dot::before {
+  content: '•';
+  margin-right: 8px;
+  font-size: 1.2em;
+}
+</style>

src/stores/manual/types.ts

@@ -6,7 +6,7 @@ export type Manual = {
 };
 
 type Page = {
-  namee: string;
+  name: string;
   label: string;
   labelEN: string;
 };