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

src/assets/icon-crown.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3782 3.89078C21.1637 3.7117 20.9032 3.59652 20.6263 3.5584C20.3495 3.52027 20.0675 3.56073 19.8126 3.67515L15.0688 5.78453L12.3126 0.815776C12.1809 0.583799 11.99 0.390881 11.7594 0.256672C11.5289 0.122463 11.2669 0.0517578 11.0001 0.0517578C10.7333 0.0517578 10.4713 0.122463 10.2408 0.256672C10.0102 0.390881 9.81934 0.583799 9.6876 0.815776L6.93135 5.78453L2.1876 3.67515C1.93214 3.5609 1.64981 3.52039 1.37252 3.5582C1.09524 3.59601 0.834067 3.71064 0.618523 3.88912C0.402979 4.0676 0.241662 4.30282 0.15281 4.56819C0.0639569 4.83356 0.0511114 5.11849 0.115725 5.39078L2.49697 15.5439C2.54251 15.7405 2.62747 15.9257 2.74672 16.0885C2.86597 16.2513 3.01702 16.3881 3.19072 16.4908C3.42589 16.6315 3.69477 16.7061 3.96885 16.7064C4.10208 16.7062 4.23462 16.6872 4.3626 16.6502C8.70306 15.4501 13.2878 15.4501 17.6282 16.6502C18.0245 16.7543 18.446 16.697 18.8001 16.4908C18.9749 16.3894 19.1267 16.253 19.2461 16.09C19.3655 15.927 19.4499 15.7411 19.4938 15.5439L21.8845 5.39078C21.9484 5.11841 21.9348 4.83361 21.8454 4.56855C21.7559 4.30349 21.5941 4.06872 21.3782 3.89078ZM18.0313 15.2064C13.4274 13.9314 8.56346 13.9314 3.95948 15.2064L1.57823 5.05328L6.32197 7.15328C6.66236 7.30802 7.04868 7.32831 7.4034 7.21007C7.75813 7.09182 8.05501 6.8438 8.23447 6.51578L11.0001 1.54703L13.7657 6.51578C13.9452 6.8438 14.2421 7.09182 14.5968 7.21007C14.9515 7.32831 15.3378 7.30802 15.6782 7.15328L20.422 5.05328L18.0313 15.2064ZM14.7501 12.2345C14.7294 12.4194 14.6417 12.5902 14.5034 12.7146C14.3652 12.839 14.1861 12.9084 14.0001 12.9095H13.9251C11.9801 12.7126 10.0201 12.7126 8.0751 12.9095C7.87745 12.9305 7.67955 12.8722 7.52486 12.7474C7.37017 12.6226 7.27135 12.4415 7.2501 12.2439C7.23172 12.0453 7.29222 11.8474 7.41852 11.6931C7.54482 11.5387 7.72679 11.4402 7.9251 11.4189C9.96943 11.2033 12.0308 11.2033 14.0751 11.4189C14.2716 11.4402 14.4521 11.5374 14.5782 11.6897C14.7042 11.842 14.7659 12.0375 14.7501 12.2345Z" fill="#0F172A"/>
+</svg>

src/assets/icon-head-black.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10.0009C20.0001 8.33719 19.5851 6.69976 18.7926 5.23693C18.0002 3.7741 16.8554 2.5321 15.4618 1.62342C14.0683 0.714739 12.47 0.168101 10.8119 0.0330203C9.15382 -0.10206 7.48821 0.178686 5.96597 0.849826C4.44374 1.52097 3.11298 2.5613 2.09425 3.87657C1.07552 5.19185 0.401001 6.74052 0.131798 8.38229C-0.137405 10.0241 0.00721324 11.7071 0.552553 13.2788C1.09789 14.8506 2.02672 16.2615 3.2549 17.3837L3.37255 17.4817C5.19907 19.104 7.55712 20 10 20C12.4429 20 14.8009 19.104 16.6275 17.4817L16.7451 17.3837C17.7716 16.4474 18.5913 15.3071 19.1518 14.0359C19.7123 12.7646 20.0012 11.3903 20 10.0009ZM1.17647 10.0009C1.1745 8.56033 1.52523 7.1412 2.19802 5.86743C2.87081 4.59365 3.84521 3.50398 5.03612 2.69356C6.22703 1.88315 7.59822 1.37664 9.02997 1.21827C10.4617 1.0599 11.9104 1.25448 13.2497 1.78503C14.5889 2.31558 15.7779 3.16596 16.7127 4.26191C17.6476 5.35785 18.3 6.66602 18.6129 8.07219C18.9258 9.47835 18.8896 10.9397 18.5076 12.3287C18.1257 13.7177 17.4095 14.992 16.4216 16.0404C15.495 14.6071 14.114 13.5264 12.5 12.9716C13.3057 12.435 13.9174 11.6532 14.2445 10.7421C14.5716 9.83088 14.5969 8.83861 14.3166 7.91195C14.0362 6.9853 13.4652 6.17346 12.6878 5.59646C11.9105 5.01945 10.9681 4.70792 10 4.70792C9.03193 4.70792 8.08954 5.01945 7.31218 5.59646C6.53483 6.17346 5.96377 6.9853 5.68343 7.91195C5.40309 8.83861 5.42836 9.83088 5.7555 10.7421C6.08264 11.6532 6.69429 12.435 7.5 12.9716C5.88597 13.5264 4.50496 14.6071 3.57843 16.0404C2.03426 14.409 1.17458 12.2473 1.17647 10.0009ZM6.66667 9.21653C6.66667 8.55722 6.86217 7.91271 7.22844 7.36452C7.59471 6.81632 8.1153 6.38906 8.72439 6.13675C9.33348 5.88444 10.0037 5.81843 10.6503 5.94705C11.2969 6.07568 11.8909 6.39317 12.357 6.85937C12.8232 7.32557 13.1407 7.91955 13.2693 8.56619C13.3979 9.21283 13.3319 9.88309 13.0796 10.4922C12.8273 11.1013 12.4001 11.622 11.8519 11.9883C11.3037 12.3545 10.6593 12.5501 10 12.5501C9.11674 12.5475 8.2704 12.1954 7.64584 11.5708C7.02128 10.9462 6.66926 10.0998 6.66667 9.21653ZM4.45098 16.864C5.02766 15.908 5.84156 15.1171 6.81377 14.5681C7.78598 14.0191 8.88352 13.7307 10 13.7307C11.1165 13.7307 12.214 14.0191 13.1862 14.5681C14.1584 15.1171 14.9723 15.908 15.549 16.864C13.9778 18.1327 12.0194 18.8246 10 18.8246C7.98061 18.8246 6.02219 18.1327 4.45098 16.864Z" fill="#0F172A"/>
+</svg>

src/assets/icon-head-blue.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 16.0014C32.0001 13.3395 31.3361 10.7196 30.0682 8.37909C28.8003 6.03856 26.9685 4.05135 24.7389 2.59747C22.5092 1.14358 19.9521 0.268961 17.2991 0.0528324C14.6461 -0.163296 11.9811 0.285897 9.54556 1.35972C7.10998 2.43355 4.98077 4.09807 3.3508 6.20252C1.72083 8.30696 0.641601 10.7848 0.210876 13.4117C-0.219849 16.0385 0.0115412 18.7313 0.884085 21.2461C1.75663 23.761 3.24275 26.0184 5.20784 27.8139L5.39608 27.9707C8.31851 30.5664 12.0914 32 16 32C19.9086 32 23.6815 30.5664 26.6039 27.9707L26.7922 27.8139C28.4345 26.3158 29.7461 24.4914 30.6428 22.4574C31.5396 20.4233 32.0019 18.2244 32 16.0014ZM1.88236 16.0014C1.8792 13.6965 2.44036 11.4259 3.51683 9.38788C4.5933 7.34985 6.15233 5.60636 8.05779 4.3097C9.96324 3.01303 12.1572 2.20262 14.4479 1.94922C16.7387 1.69583 19.0567 2.00717 21.1995 2.85605C23.3422 3.70493 25.2446 5.06554 26.7404 6.81905C28.2362 8.57255 29.28 10.6656 29.7806 12.9155C30.2812 15.1654 30.2234 17.5036 29.6122 19.7259C29.0011 21.9483 27.8551 23.9873 26.2745 25.6647C24.7921 23.3713 22.5825 21.6422 20 20.7546C21.2891 19.8959 22.2678 18.6452 22.7912 17.1873C23.3146 15.7294 23.3551 14.1418 22.9065 12.6591C22.458 11.1765 21.5443 9.87753 20.3005 8.95433C19.0567 8.03112 17.5489 7.53267 16 7.53267C14.4511 7.53267 12.9433 8.03112 11.6995 8.95433C10.4557 9.87753 9.54202 11.1765 9.09348 12.6591C8.64494 14.1418 8.68537 15.7294 9.2088 17.1873C9.73222 18.6452 10.7109 19.8959 12 20.7546C9.41754 21.6422 7.20793 23.3713 5.72549 25.6647C3.25482 23.0543 1.87932 19.5957 1.88236 16.0014ZM10.6667 14.7464C10.6667 13.6915 10.9795 12.6603 11.5655 11.7832C12.1515 10.9061 12.9845 10.2225 13.959 9.8188C14.9336 9.41511 16.0059 9.30948 17.0405 9.51528C18.075 9.72108 19.0254 10.2291 19.7712 10.975C20.5171 11.7209 21.0251 12.6713 21.2309 13.7059C21.4366 14.7405 21.331 15.8129 20.9274 16.7875C20.5237 17.7621 19.8401 18.5951 18.963 19.1812C18.086 19.7673 17.0548 20.0801 16 20.0801C14.5868 20.0759 13.2326 19.5127 12.2333 18.5133C11.234 17.514 10.6708 16.1597 10.6667 14.7464ZM7.12157 26.9824C8.04426 25.4527 9.34649 24.1873 10.902 23.309C12.4576 22.4306 14.2136 21.9691 16 21.9691C17.7864 21.9691 19.5424 22.4306 21.098 23.309C22.6535 24.1873 23.9557 25.4527 24.8784 26.9824C22.3645 29.0122 19.231 30.1194 16 30.1194C12.769 30.1194 9.6355 29.0122 7.12157 26.9824Z" fill="#0099FF"/>
+</svg>

src/assets/icon-logout.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 13L19 9M19 9L15 5M19 9H5M11 13V14C11 14.7956 10.6839 15.5587 10.1213 16.1213C9.55871 16.6839 8.79565 17 8 17H4C3.20435 17 2.44129 16.6839 1.87868 16.1213C1.31607 15.5587 1 14.7956 1 14V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1H8C8.79565 1 9.55871 1.31607 10.1213 1.87868C10.6839 2.44129 11 3.20435 11 4V5" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/main.css

@@ -3,3 +3,4 @@
 @import './components.css';
 @import './layout.css';
 @import './vendors.css';
+@import './zindex.css';

src/assets/zindex.css

@@ -0,0 +1,4 @@
+main.w-full {
+    z-index: 1;
+    position: absolute; /*if it were static, the acct mgmt menu would be overlapped*/
+}

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 {

src/i18n/en.json

@@ -7,6 +7,12 @@
         "Clear": "Clear",
         "Save": "Save"
     },
+    "AcctMgmt":{
+        "hi": "Hi, ",
+        "acctMgmt": "Account management",
+        "mangUrAcct": "Manage your account",
+        "Logout": "Log out"
+    },
     "Compare": {
         "timeUsage": "Time Usage",
         "frequency": "Frequency",

src/stores/acctMgmt.js

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+
+export default defineStore('acctMgmtStore', {
+  state: () => ({
+    isAcctMenuOpen: false,
+  }),
+  getters: {
+  },
+  actions: {
+    /**
+     * Set related boolean to true
+     */
+    openAcctMenu(){
+      this.isAcctMenuOpen = true;
+    },
+    /**
+     * Set related boolean to false
+     */
+    closeAcctMenu(){
+      this.isAcctMenuOpen = false;
+    },
+    toggleIsAcctMenuOpen() {
+      this.isAcctMenuOpen = !this.isAcctMenuOpen;
+    },
+  },
+})