WIP: account management menu can be toggled by head button now.

src/components/Header.vue

@@ -4,25 +4,26 @@
       <figure>
           <DspLogo />
       </figure>
-      <div class="flex justify-between items-center" v-show="showMember">
+      <div class="flex justify-between items-center relative"
+        v-show="showMember">
+        <!-- TODO: 換成人頭按鈕 帳號管理功能 -->
         <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
           Logout
         </button>
-        <!-- <figure>
-          <router-link :to="'/member-area'">
-            <IconMember class="w-8 h-8 fill-neutral-500"/>
-          </router-link>
-        </figure> -->
+        <img id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
+          class="cursor-pointer"  @click="onAcctHeadClick"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { storeToRefs } from 'pinia';
+import { storeToRefs, mapActions, } from 'pinia';
+import i18next from '@/i18n/i18n';
 import loginStore from '@/stores/login.js';
+import acctMenuStore from "@/stores/acctMgmt.js";
 import DspLogo from '@/components/icons/DspLogo.vue';
-import IconMember from '@/components/icons/IconMember.vue';
 import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
@@ -31,6 +32,7 @@ export default {
   data() {
     return {
       showMember: false,
+      i18next: i18next,
     }
   },
   setup() {
@@ -45,7 +47,6 @@ export default {
   },
   components: {
     DspLogo,
-    IconMember
   },
   methods: {
     /**
@@ -63,6 +64,10 @@ export default {
         this.logOut();
       }
     },
+    onAcctHeadClick(){
+      this.toggleIsAcctMenuOpen();
+    },
+    ...mapActions(acctMenuStore, ['toggleIsAcctMenuOpen']),
   },
   mounted() {
     this.$route.name === 'Login' || this.$route.name === 'NotFound404' ? this.showMember = false : this.showMember = true;