Merge pull request #10 from liftlearning/create_menu

Create menu

src/assets/chevronDownBlack.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="black"/>
+</svg>

src/assets/chevronUp.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3536 7.35355C13.1583 7.54882 12.8417 7.54882 12.6464 7.35355L7 1.70711L1.35355 7.35355C1.15829 7.54881 0.841709 7.54881 0.646446 7.35355C0.451184 7.15829 0.451184 6.84171 0.646446 6.64645L6.64645 0.646446C6.84171 0.451184 7.15829 0.451184 7.35355 0.646446L13.3536 6.64645C13.5488 6.84171 13.5488 7.15829 13.3536 7.35355Z" fill="#111827"/>
+</svg>

src/components/TopBar.vue

@@ -2,6 +2,7 @@
 import router from "@/router";
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
+import { ref } from "vue";
 import blockchain from "../utils/blockchain";
 
 // Store reference
@@ -9,6 +10,9 @@ const etherStore = useEtherStore();
 
 const { walletAddress, balance } = storeToRefs(etherStore);
 
+const menuOpenToggle = ref<boolean>(false);
+const menuHoverToggle = ref<boolean>(false);
+
 //Methods
 const connectMetaMask = () => {
   blockchain.connectProvider();
@@ -28,31 +32,27 @@ const formatWalletBalance = (): String => {
   const fixed = Number(balance.value);
   return fixed.toFixed(2);
 };
+
+const disconnectUser = () => {
+  etherStore.setWalletAddress("");
+  const currentRoute = router.currentRoute.value.path;
+  if (currentRoute !== "/") {
+    router.push("/");
+  } else {
+    window.location.reload();
+  }
+};
 </script>
 
 <template>
   <header>
-    <img
+    <img alt="P2Pix logo" class="logo" src="@/assets/logo.svg" width="75" height="75" />
-      alt="P2Pix logo"
-      class="logo"
-      src="@/assets/logo.svg"
-      width="75"
-      height="75"
-    />
     <div class="flex gap-4 items-center">
-      <button
+      <button type="button" class="default-button" v-on:click="router.push('/seller')">
-        type="button"
-        class="default-button"
-        v-on:click="router.push('/seller')"
-      >
         Quero vender
       </button>
-      <button
+      <button type="button" v-if="!walletAddress" class="border-amber-500 border-2 rounded default-button"
-        type="button"
+        @click="connectMetaMask()">
-        v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button"
-        @click="connectMetaMask()"
-      >
         Conectar carteira
       </button>
       <div v-if="walletAddress" class="account-info">
@@ -61,10 +61,85 @@ 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 cursor-pointer"
-          <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+            @click="menuOpenToggle = !menuOpenToggle"
+            @mouseover="menuHoverToggle = true"
+            @mouseout="menuHoverToggle = false"
+            :style="{
+              backgroundColor: menuOpenToggle
+                ? '#F9F9F9'
+                : menuHoverToggle
+                ? '#F9F9F9'
+                : 'transparent',
+            }"
+          >
+            <img alt="Account image" src="@/assets/account.svg" />
+            <span
+              class="default-text text-sm"
+              :style="{
+                color: menuOpenToggle
+                  ? '#000000'
+                  : menuHoverToggle
+                  ? '#000000'
+                  : 'rgb(249 250 251)',
+              }"
+            >
+              {{ formatWalletAddress() }}
+            </span>
+            <img
+              class="text-black"
+              v-if="!menuHoverToggle && !menuOpenToggle"
+              alt="Chevron Down"
+              src="@/assets/chevronDown.svg"
+            />
+            <img
+              v-if="menuOpenToggle"
+              alt="Chevron Up"
+              src="@/assets/chevronUp.svg"
+            />
+            <img
+              v-if="menuHoverToggle && !menuOpenToggle"
+              alt="Chevron Down Black"
+              src="@/assets/chevronDownBlack.svg"
+            />
+          </div>
+          <div
+            v-show="menuOpenToggle"
+            class="mt-10 absolute w-full text-black"
+          >
+            <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="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">
@@ -85,6 +160,7 @@ header {
 .default-button {
   @apply px-4 py-2 rounded text-gray-50 font-semibold text-base;
 }
+
 .account-info {
   @apply flex items-center gap-6;
 }
@@ -96,4 +172,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";
 import SellerView from "@/views/SellerView.vue";
 
 const router = createRouter({
@@ -21,6 +23,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,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page">Histórico de ofertas</div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex gap-8 mt-24;
+}
+</style>

src/views/ManageBidsView.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page">Gerenciar Ofertas</div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex gap-8 mt-24;
+}
+</style>