From 7e88c459bb787a190b141212220012229efd578b Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 3 Feb 2023 17:44:02 -0300
Subject: [PATCH] Fix topBar behavior

---
 package.json                     |  1 +
 src/components/TopBar/TopBar.vue | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0d122f3..7c2f06f 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.3",
     "@heroicons/vue": "^2.0.12",
+    "@vueuse/core": "^9.12.0",
     "alchemy-sdk": "^2.3.0",
     "axios": "^1.2.1",
     "crc": "^3.8.0",
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 7cb8b92..d8ad3ec 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "@/store/ether";
-import { ref } from "vue";
+import { ref, onBeforeUnmount, onMounted } from "vue";
+import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
 import ethereumImage from "@/assets/ethereum.svg";
@@ -17,6 +18,8 @@ const menuHoverToggle = ref<boolean>(false);
 
 const currencyMenuOpenToggle = ref<boolean>(false);
 const currencyMenuHoverToggle = ref<boolean>(false);
+const walletAddressRef = ref<any>(null);
+const currencyRef = ref<any>(null);
 
 //Methods
 const connectMetaMask = async (): Promise<void> => {
@@ -58,6 +61,16 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
 
   return validImages[networkName];
 };
+
+onClickOutside(walletAddressRef, () => {
+  menuHoverToggle.value = false;
+  menuOpenToggle.value = false;
+});
+
+onClickOutside(currencyRef, () => {
+  currencyMenuOpenToggle.value = false;
+  currencyMenuHoverToggle.value = false;
+});
 </script>
 
 <template>
@@ -103,6 +116,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
       </RouterLink>
       <div class="flex flex-col" v-if="walletAddress">
         <div
+          ref="currencyRef"
           class="group top-bar-info cursor-pointer hover:bg-white h-10"
           @click="
             [
@@ -216,6 +230,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
       <div v-if="walletAddress" class="account-info">
         <div class="flex flex-col">
           <div
+            ref="walletAddressRef"
             class="top-bar-info cursor-pointer h-10"
             @click="
               [