MyAccount page prototype

src/components/AccountMenu/AcctMenu.vue

@@ -15,7 +15,7 @@
         </li>
         <li id="btn_mang_ur_acct"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center">
+          items-center" @click="onBtnMyAccountClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg" alt="head-black"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
         </li>
@@ -33,6 +33,7 @@
 import { computed, onMounted, ref, } from 'vue';
 import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
+import { useRouter } from 'vue-router';
 import LoginStore from '@/stores/login.ts';
 import AcctMgmtStore from '@/stores/acctMgmt.ts';
 import AllMapDataStore from '@/stores/allMapData.js';
@@ -43,6 +44,7 @@ export default {
   setup() {
     const { logOut } = LoginStore();
     const loginStore = LoginStore();
+    const router = useRouter();
     const allMapDataStore = AllMapDataStore();
     const conformanceStore = ConformanceStore();
     const acctMgmtStore = AcctMgmtStore();
@@ -61,6 +63,11 @@ export default {
           isAdmin.value = true;
         }
       };
+    
+    const onBtnMyAccountClick = async() => {
+      acctMgmtStore.closeAcctMenu();
+      await router.push('/my-account');
+    }
 
     onMounted(async () => { 
         await getIsAdminValue();
@@ -73,6 +80,7 @@ export default {
       allMapDataStore,
       conformanceStore,
       isAdmin,
+      onBtnMyAccountClick,
     };
   },
   data() {

src/components/Navbar.vue

@@ -94,6 +94,7 @@ export default {
         // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
         COMPARE: ['PERFORMANCE'],
         'ACCOUNT MANAGEMENT': [],
+        'MY ACCOUNT': [],
       },
       navViewName: 'FILES',
       uploadModal: false,