From 840d81da9f6547298a2e49b24ba1300a7dc6fbe6 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 14 Aug 2024 11:14:35 +0800
Subject: [PATCH] fix: #333 hover blue. fix: #332 v-if replacing v-show

---
 src/components/AccountMenu/AcctMenu.vue |  4 ++--
 src/components/Header.vue               | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/AccountMenu/AcctMenu.vue b/src/components/AccountMenu/AcctMenu.vue
index 94758e2..4097682 100644
--- a/src/components/AccountMenu/AcctMenu.vue
+++ b/src/components/AccountMenu/AcctMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="account_menu" v-show="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
+    <div id="account_menu" v-if="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
         <div id="greeting" class="w-full border-b border-[#CBD5E1]">
           <span class="m-4 h-[48px]">
           {{ i18next.t("AcctMgmt.hi") }}{{ userData.name }}
@@ -34,7 +34,7 @@ import { computed, onMounted, ref, } from 'vue';
 import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
 import LoginStore from '@/stores/login.ts';
-import AcctMgmtStore from '@/stores/acctMgmt';
+import AcctMgmtStore from '@/stores/acctMgmt.ts';
 import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 322c78e..1ec91ed 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -6,15 +6,21 @@
       </figure>
       <div class="flex justify-between items-center relative"
         v-show="showMember">
-        <img v-show="true" id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
-          class="cursor-pointer z-50"  @click="toggleIsAcctMenuOpen" alt="user-head"
-        />
+          <img id="acct_mgmt_button" v-if="!isHeadHovered" src="@/assets/icon-head-black.svg" @mouseenter='isHeadHovered = true'
+            width="32" height="32" @click="toggleIsAcctMenuOpen"
+            class="cursor-pointer z-50"  alt="user-head"
+          />
+          <img id="acct_mgmt_button" v-else  src="@/assets/icon-head-blue.svg" @mouseleave='isHeadHovered = false'
+            width="32" height="32" @click="toggleIsAcctMenuOpen"
+            class="cursor-pointer z-50" alt="user-head"
+          />       
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { ref, } from 'vue';
 import { storeToRefs, } from 'pinia';
 import i18next from '@/i18n/i18n';
 import loginStore from '@/stores/login.ts';
@@ -39,6 +45,7 @@ export default {
     const acctMgmtStore = useAcctMgmtStore();
     const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
     const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
+    const isHeadHovered = ref(false);
 
     const toggleIsAcctMenuOpen = () => {
       acctMgmtStore.toggleIsAcctMenuOpen();
@@ -51,6 +58,7 @@ export default {
       allMapDataStore, conformanceStore,
       conformanceFileName,
       toggleIsAcctMenuOpen,
+      isHeadHovered,
     };
   },
   components: {