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

src/components/AccountMenu/AcctMenu.vue

@@ -0,0 +1,62 @@
+<template>
+    <div id="account_menu" v-show="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
+        <span id="greeting" class="m-4 h-[48px]">{{ i18next.t("AcctMgmt.hi") }}</span>
+        <ul class="w-full min-h-10">
+          <!-- 這裡不使用迴圈是因為src值用變數的話會沒辦法顯示svg -->
+        <li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
+          items-center">          
+            <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-crown.svg"></span>
+            <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.acctMgmt")}}</span>
+        </li>
+        <li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
+          items-center">
+            <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg"></span>
+            <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
+        </li>
+        <li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
+          items-center">
+            <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg"></span>
+            <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
+        </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'pinia';
+import i18next from '@/i18n/i18n';
+import AcctMgmtStore from '@/stores/acctMgmt';
+
+export default {
+  data() {
+    return {
+      i18next: i18next,
+    }
+  },
+  computed: {
+    ...mapState(AcctMgmtStore, ['isAcctMenuOpen']),
+  },
+  methods: {
+    clickOtherPlacesThenCloseMenu(){
+      const acctMgmtButton = document.getElementById('acct_mgmt_button');
+      const acctMgmtMenu = document.getElementById('account_menu');
+
+      document.addEventListener('click', (event) => {
+          if (!acctMgmtMenu.contains(event.target) && !acctMgmtButton.contains(event.target)) {
+            this.closeAcctMenu();
+          }
+      });
+    },
+    ...mapActions(AcctMgmtStore, ['openAcctMenu', 'closeAcctMenu']),
+  },
+  mounted(){
+    this.clickOtherPlacesThenCloseMenu();
+  },
+};
+</script>
+
+<style>
+#account_menu {
+  z-index: 2147483648;
+}
+</style>

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;

src/components/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="bg-neutral-700">
     <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
-      <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
+      <div class="flex justify-between items-center flex-wrap relative" v-show="showNavbarBreadcrumb">
         <div id="nav_bar" class="flex flex-1 items-center">
           <!-- 回 Files 頁 -->
           <router-link to="/files" class="mr-4" v-if="showIcon" id="backPage">
@@ -56,6 +56,7 @@
           </button>
           <!-- <button class="btn btn-sm btn-neutral">Download</button> -->
         </div>
+        <AcctMenu/>
       </div>
     </div>
   </nav>
@@ -70,6 +71,7 @@ import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
 import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertModal.js';
 import UploadModal from './File/UploadModal.vue';
+import AcctMenu from './AccountMenu/AcctMenu.vue';
 
 export default {
   setup() {
@@ -95,6 +97,7 @@ export default {
     IconSearch,
     IconSetting,
     UploadModal,
+    AcctMenu,
   },
   data() {
     return {