create menu

src/components/TopBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
+import { ref } from "vue";
 import blockchain from "../utils/blockchain";
 
 // Store reference
@@ -8,6 +9,10 @@ const etherStore = useEtherStore();
 
 const { walletAddress, balance } = storeToRefs(etherStore);
 
+const emit = defineEmits(["disconnectUser"]);
+
+const menuToggle = ref<boolean>(false);
+
 //Methods
 const connectMetaMask = () => {
   blockchain.connectProvider();
@@ -29,6 +34,14 @@ const formatWalletBalance = (): string => {
 
   return fixed;
 };
+
+// const disconnectWallet = () => {
+//   menuToggle.value = false;
+// };
+
+const log = () => {
+  console.log(menuToggle.value);
+};
 </script>
 
 <template>
@@ -56,10 +69,63 @@ const formatWalletBalance = (): string => {
           <span class="default-text"> Ethereum </span>
           <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
         </div>
-        <div class="top-bar-info">
-          <img alt="Account image" src="@/assets/account.svg" />
-          <span class="default-text text-sm">{{ formatWalletAddress() }}</span>
-          <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+        <div class="flex flex-col">
+          <div
+            class="top-bar-info"
+            @mouseover="menuToggle = true"
+            @mouseout="menuToggle = false"
+            :style="{
+              backgroundColor: menuToggle ? '#F9F9F9' : 'transparent',
+            }"
+          >
+            <img alt="Account image" src="@/assets/account.svg" />
+            <span
+              class="default-text text-sm"
+              :style="{
+                color: menuToggle ? '#000000' : 'rgb(249 250 251)',
+              }"
+            >
+              {{ formatWalletAddress() }}
+            </span>
+            <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+          </div>
+          <div
+            v-show="menuToggle"
+            class="mt-10 absolute w-full text-black"
+            @mouseover="menuToggle = true"
+            @mouseout="menuToggle = false"
+          >
+            <div class="pl-4 mt-2">
+              <div class="bg-white rounded-md z-10">
+                <div
+                  class="menu-button px-4 rounded-md cursor-pointer"
+                  onclick="window.location='/bid_history'"
+                >
+                  <div class="py-4 text-end font-semibold text-xs">
+                    Histórico de compras
+                  </div>
+                  <hr />
+                </div>
+                <div
+                  class="menu-button px-4 cursor-pointer"
+                  onclick="window.location='/manage_bids'"
+                >
+                  <div class="py-4 text-end font-semibold text-xs">
+                    Gerenciar Ofertas
+                  </div>
+                  <hr />
+                </div>
+                <div
+                  class="menu-button px-4 py-1 rounded-md cursor-pointer"
+                  @click="emit('disconnectUser', {})"
+                >
+                  <div class="py-3 text-end font-semibold text-xs">
+                    Desconectar
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="top-bar-info">
           <span class="default-text text-sm">
@@ -91,4 +157,8 @@ header {
 .top-bar-info {
   @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
 }
+
+.menu-button:hover {
+  background-color: #E5E7EB;
+}
 </style>