fix: #333 hover blue. fix: #332 v-if replacing v-show

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';

src/components/Header.vue

@@ -6,8 +6,13 @@
       </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" 
+          <img id="acct_mgmt_button" v-if="!isHeadHovered" src="@/assets/icon-head-black.svg" @mouseenter='isHeadHovered = true'
-          class="cursor-pointer z-50"  @click="toggleIsAcctMenuOpen" alt="user-head"
+            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>
@@ -15,6 +20,7 @@
 </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: {