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">
+        <div class="flex flex-col">
-          <img alt="Account image" src="@/assets/account.svg" />
+          <div
-          <span class="default-text text-sm">{{ formatWalletAddress() }}</span>
+            class="top-bar-info"
-          <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+            @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>

src/router/index.ts

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import MockView from "../views/MockView.vue";
+import BidHistoryView from "../views/BidHistoryView.vue";
+import ManageBidsView from "../views/ManageBidsView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +17,16 @@ const router = createRouter({
       name: "mock",
       component: MockView,
     },
+    {
+      path: "/bid_history",
+      name: "bid history",
+      component: BidHistoryView,
+    },
+    {
+      path: "/manage_bids",
+      name: "manage bids",
+      component: ManageBidsView,
+    },
   ],
 });
 

src/views/BidHistoryView.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>Histórico de ofertas</div>
+</template>
+
+<style scoped></style>

src/views/HomeView.vue

@@ -62,6 +62,12 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     // Valor = tokenValue
   }
 };
+
+const disconnectUser = ({}: any) => {
+  console.log('entrou')
+  etherStore.setWalletAddress("");
+  flowStep.value == Step.Search;
+};
 </script>
 
 <template>
@@ -77,6 +83,7 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     />
     <ValidationComponent v-if="loadingLock" />
   </div>
+  <div @disconnect-user="disconnectUser"></div>
 </template>
 
 <style scoped></style>

src/views/ManageBidsView.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>Gerenciar Ofertas</div>
+</template>
+
+<style scoped></style>