fix: acct_mgmt_button

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto px-4 h-14">
+  <div class="mx-auto px-4 h-14 z-50">
     <div class="flex justify-between items-center h-full">
       <figure>
           <DspLogo />
@@ -10,7 +10,7 @@
           Logout
         </button> -->
         <img v-show="true" id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
-          class="cursor-pointer"  @click="onAcctHeadClick"
+          class="cursor-pointer z-50"  @click="toggleIsAcctMenuOpen"
         />
       </div>
     </div>
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import { storeToRefs, mapActions, } from 'pinia';
+import { storeToRefs, } from 'pinia';
 import i18next from '@/i18n/i18n';
 import loginStore from '@/stores/login.ts';
-import acctMenuStore from "@/stores/acctMgmt.ts";
+import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 import DspLogo from '@/components/icons/DspLogo.vue';
 import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
@@ -39,10 +39,23 @@ export default {
     const { logOut } = store;
     const allMapDataStore = AllMapDataStore();
     const conformanceStore = ConformanceStore();
+    const acctMgmtStore = useAcctMgmtStore();
     const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
     const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
 
-    return { logOut, temporaryData, tempFilterId, postRuleData, ruleData, conformanceLogTempCheckId, conformanceFilterTempCheckId, allMapDataStore, conformanceStore, conformanceFileName }
+    const toggleIsAcctMenuOpen = () => {
+      console.log('head clicked', );
+      acctMgmtStore.toggleIsAcctMenuOpen();
+    }
+
+    return { logOut, temporaryData, tempFilterId,
+      postRuleData, ruleData,
+      conformanceLogTempCheckId,
+      conformanceFilterTempCheckId,
+      allMapDataStore, conformanceStore,
+      conformanceFileName,
+      toggleIsAcctMenuOpen,
+    };
   },
   components: {
     DspLogo,
@@ -63,10 +76,6 @@ 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;