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>