refactor: show icon

src/pages/00_manual/MainPage.vue

@@ -11,6 +11,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';
+import { Icon } from '@iconify/vue/dist/iconify.js';
 
 // NOTE: Variable
 const manualStore = useManualStore();
@@ -39,11 +40,18 @@ onMounted(async () => {
     class="column full-height no-wrap surface-1 rounded bordered overflow-hidden q-pa-sm"
   >
     <section class="scroll q-gutter-y-sm">
-      <Expansion v-for="v in dataManual">
+      <q-expansion-item v-for="v in dataManual" :content-inset-level="1">
         <template #header>
+          <div class="row items-center full-width">
+            <Icon
+              v-if="!!v.icon"
+              :icon="v.icon"
+              :color="'var(--brand-1)'"
+              class="q-mr-sm"
+            />
             {{ $i18n.locale === 'eng' ? v.labelEN : v.label }}
+          </div>
         </template>
-        <template #main>
         <q-item
           v-for="x in v.page"
           clickable
@@ -51,10 +59,16 @@ onMounted(async () => {
           class="dot items-center rounded"
           @click="() => navigateTo(`/manual/${v.category}/${x.name}`)"
         >
+          <Icon
+            v-if="!!x.icon"
+            :icon="x.icon"
+            width="16px"
+            :color="'var(--brand-1)'"
+            class="q-mr-sm"
+          />
           {{ $i18n.locale === 'eng' ? x.labelEN : x.label }}
         </q-item>
-        </template>
+      </q-expansion-item>
-      </Expansion>
     </section>
   </div>
 </template>

src/stores/manual/types.ts

@@ -2,6 +2,7 @@ export type Manual = {
   label: string;
   labelEN: string;
   category: string;
+  icon?: string;
   page: Page[];
 };
 
@@ -9,4 +10,5 @@ type Page = {
   name: string;
   label: string;
   labelEN: string;
+  icon?: string;
 };