feat: enhance drawer menu with internationalization support and manual section

src/layouts/DrawerComponent.vue

@@ -6,6 +6,7 @@ import { Icon } from '@iconify/vue';
 import useMyBranch from 'stores/my-branch';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 
 type Menu = {
   label: string;
@@ -14,11 +15,13 @@ type Menu = {
   hidden?: boolean;
   disabled?: boolean;
   isax?: boolean;
+  noI18n?: boolean;
   children?: Menu[];
 };
 
 const router = useRouter();
 const $q = useQuasar();
+const { locale } = useI18n();
 
 const userBranch = useMyBranch();
 const { currentMyBranch } = storeToRefs(userBranch);
@@ -58,38 +61,22 @@ function branchSetting() {
   //TODO: click setting (cog icon) on drawer menu
 }
 
-watch(
+function initMenu() {
-  () => currentPath.value,
+  // TODO: replace mock
-  () => {
+  const test = [
-    if (currentPath.value === '/') {
+    {
-      menuActive.value.fill(false);
+      label: 'หน้าแรก',
-      menuActive.value[0] = true;
+      labelEN: 'Home Page',
-    } else reActiveMenu();
+      category: 'jws',
-  },
+      page: [
-);
+        {
-
+          name: 'chapter-01-main',
-watch(
+          label: 'หลัก',
-  () => props.mini,
+          labelEN: 'Main',
-  () => {
+        },
-    if (props.mini) {
+      ],
-      reActiveMenu();
+    },
-    }
+  ];
-  },
-);
-
-onMounted(async () => {
-  const uid = getUserId();
-
-  role.value = getRole();
-
-  if (!uid) return;
-
-  if (role.value.includes('system')) {
-    const result = await userBranch.fetchListOptionBranch();
-    if (result && result.total > 0) currentMyBranch.value = result.result[0];
-  }
-  const result = await userBranch.fetchListMyBranch(uid);
-  if (result && result.total > 0) currentMyBranch.value = result.result[0];
 
   menuData.value = [
     {
@@ -185,7 +172,60 @@ onMounted(async () => {
         { label: 'dashboard', route: '/dash-board' },
       ],
     },
+
+    {
+      label: 'menu.manual',
+      icon: 'mdi-book-open-variant-outline',
+      children: test.map((m) => ({
+        label: locale.value === 'eng' ? m.labelEN : m.label,
+        route: `/manual/${m.category}`,
+        noI18n: true,
+      })),
+    },
   ];
+}
+
+watch(
+  () => currentPath.value,
+  () => {
+    if (currentPath.value === '/') {
+      menuActive.value.fill(false);
+      menuActive.value[0] = true;
+    } else reActiveMenu();
+  },
+);
+
+watch(
+  () => props.mini,
+  () => {
+    if (props.mini) {
+      reActiveMenu();
+    }
+  },
+);
+
+watch(
+  () => locale.value,
+  () => {
+    initMenu();
+  },
+);
+
+onMounted(async () => {
+  const uid = getUserId();
+
+  role.value = getRole();
+
+  if (!uid) return;
+
+  if (role.value.includes('system')) {
+    const result = await userBranch.fetchListOptionBranch();
+    if (result && result.total > 0) currentMyBranch.value = result.result[0];
+  }
+  const result = await userBranch.fetchListMyBranch(uid);
+  if (result && result.total > 0) currentMyBranch.value = result.result[0];
+
+  initMenu();
 
   menuActive.value = menuData.value.map(() => false);
 
@@ -266,10 +306,10 @@ onMounted(async () => {
                   style="white-space: nowrap"
                   :style="!menuActive[i] && `color: var(--foreground)`"
                 >
-                  {{ $t(`${menu.label}.title`) }}
+                  {{ menu.noI18n ? menu.label : $t(`${menu.label}.title`) }}
                 </span>
                 <q-tooltip :delay="500">
-                  {{ $t(`${menu.label}.title`) }}
+                  {{ menu.noI18n ? menu.label : $t(`${menu.label}.title`) }}
                 </q-tooltip>
 
                 <q-menu
@@ -325,13 +365,35 @@ onMounted(async () => {
                     }"
                   >
                     <span class="q-px-md" style="white-space: nowrap">
-                      {{ $t(`${menu.label}.${sub.label}`) }}
+                      {{
+                        sub.noI18n
+                          ? sub.label
+                          : $t(`${menu.label}.${sub.label}`)
+                      }}
                     </span>
                   </nav>
                 </div>
               </template>
             </q-list>
           </q-expansion-item>
+
+          <!-- Manual -->
+          <!-- <q-expansion-item
+            v-if="i === menuData.length - 1"
+            id="menu.manual"
+            for="menu.manual"
+            dense
+            expand-icon-class="no-padding"
+            :hide-expand-icon="mini"
+            :header-class="{
+              row: true,
+              'no-padding justify-center': mini,
+              'active-menu text-weight-bold': menuActive[i],
+              'text-weight-medium': !menu.disabled,
+            }"
+          >
+            asd
+          </q-expansion-item> -->
         </template>
 
         <!-- <q-item