From e12e8fc07f2c1dd8383d6cbbbde6df867790ab35 Mon Sep 17 00:00:00 2001
From: EsioFreitas <esio.gustavo@gmail.com>
Date: Thu, 22 Dec 2022 18:51:41 -0300
Subject: [PATCH 1/2] feat: add currency menu

---
 src/components/TopBar.vue | 89 +++++++++++++++++++++++++++++++++------
 1 file changed, 75 insertions(+), 14 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 25989d0..ff4a85c 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -13,6 +13,8 @@ const { walletAddress, balance } = storeToRefs(etherStore);
 const menuOpenToggle = ref<boolean>(false);
 const menuHoverToggle = ref<boolean>(false);
 
+const currencyMenuToggle = ref<boolean>(false);
+
 //Methods
 const connectMetaMask = () => {
   blockchain.connectProvider();
@@ -46,20 +48,82 @@ const disconnectUser = () => {
 
 <template>
   <header>
-    <img alt="P2Pix logo" class="logo" src="@/assets/logo.svg" width="75" height="75" />
+    <img
+      alt="P2Pix logo"
+      class="logo"
+      src="@/assets/logo.svg"
+      width="75"
+      height="75"
+    />
     <div class="flex gap-4 items-center">
-      <button type="button" class="default-button" v-on:click="router.push('/seller')">
+      <button
+        type="button"
+        class="default-button"
+        v-on:click="router.push('/seller')"
+      >
         Quero vender
       </button>
-      <button type="button" v-if="!walletAddress" class="border-amber-500 border-2 rounded default-button"
-        @click="connectMetaMask()">
+      <button
+        type="button"
+        v-if="!walletAddress"
+        class="border-amber-500 border-2 rounded default-button"
+        @click="connectMetaMask()"
+      >
         Conectar carteira
       </button>
       <div v-if="walletAddress" class="account-info">
-        <div class="top-bar-info">
-          <img alt="Ethereum image" src="@/assets/ethereum.svg" />
-          <span class="default-text"> Ethereum </span>
-          <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+        <div class="flex flex-col">
+          <div
+            class="group top-bar-info cursor-pointer hover:bg-white"
+            @click="currencyMenuToggle = !currencyMenuToggle"
+          >
+            <img alt="Ethereum image" src="@/assets/ethereum.svg" />
+            <span class="default-text group-hover:text-black"> Ethereum </span>
+            <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+          </div>
+          <div
+            v-show="currencyMenuToggle"
+            class="mt-10 absolute w-full text-black"
+          >
+            <div class="mt-2">
+              <div class="bg-white rounded-md z-10">
+                <div class="menu-button px-4 rounded-md cursor-pointer">
+                  <div class="flex justify-between">
+                    <img
+                      alt="Ethereum image"
+                      width="20"
+                      height="20"
+                      src="@/assets/ethereum.svg"
+                    />
+                    <span
+                      class="text-black py-4 text-end font-semibold text-xs"
+                    >
+                      Ethereum
+                    </span>
+                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+                  </div>
+                  <hr />
+                </div>
+                <div class="menu-button px-4 rounded-md cursor-pointer">
+                  <div class="flex justify-between">
+                    <img
+                      alt="Ethereum image"
+                      width="20"
+                      height="20"
+                      src="@/assets/polygon.svg"
+                    />
+                    <span
+                      class="text-black py-4 text-end font-semibold text-xs"
+                    >
+                      Polygon
+                    </span>
+                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+                  </div>
+                  <hr />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="flex flex-col">
           <div
@@ -105,11 +169,8 @@ const disconnectUser = () => {
               src="@/assets/chevronDownBlack.svg"
             />
           </div>
-          <div
-            v-show="menuOpenToggle"
-            class="mt-10 absolute w-full text-black"
-          >
-            <div class="pl-4 mt-2">
+          <div v-show="menuOpenToggle" class="mt-10 absolute w-full text-black">
+            <div class="mt-2">
               <div class="bg-white rounded-md z-10">
                 <div
                   class="menu-button px-4 rounded-md cursor-pointer"
@@ -174,6 +235,6 @@ header {
 }
 
 .menu-button:hover {
-  background-color: #E5E7EB;
+  background-color: #e5e7eb;
 }
 </style>

From 903acc9ef5a3667444da9e85d4bfab0b3c167787 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 23 Dec 2022 12:17:54 -0300
Subject: [PATCH 2/2] update currency menu behavior when clicked

---
 src/components/TopBar.vue | 55 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index ff4a85c..0402e33 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -13,7 +13,8 @@ const { walletAddress, balance } = storeToRefs(etherStore);
 const menuOpenToggle = ref<boolean>(false);
 const menuHoverToggle = ref<boolean>(false);
 
-const currencyMenuToggle = ref<boolean>(false);
+const currencyMenuOpenToggle = ref<boolean>(false);
+const currencyMenuHoverToggle = ref<boolean>(false);
 
 //Methods
 const connectMetaMask = () => {
@@ -75,14 +76,54 @@ const disconnectUser = () => {
         <div class="flex flex-col">
           <div
             class="group top-bar-info cursor-pointer hover:bg-white"
-            @click="currencyMenuToggle = !currencyMenuToggle"
+            @click="
+              [
+                (currencyMenuOpenToggle = !currencyMenuOpenToggle),
+                (menuOpenToggle = false),
+              ]
+            "
+            @mouseover="currencyMenuHoverToggle = true"
+            @mouseout="currencyMenuHoverToggle = false"
+            :style="{
+              backgroundColor: currencyMenuOpenToggle
+                ? '#F9F9F9'
+                : currencyMenuHoverToggle
+                ? '#F9F9F9'
+                : 'transparent',
+            }"
           >
             <img alt="Ethereum image" src="@/assets/ethereum.svg" />
-            <span class="default-text group-hover:text-black"> Ethereum </span>
-            <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+            <span
+              class="default-text group-hover:text-black"
+              :style="{
+                color: currencyMenuOpenToggle
+                  ? '#000000'
+                  : currencyMenuHoverToggle
+                  ? '#000000'
+                  : 'rgb(249 250 251)',
+              }"
+            >
+              Ethereum
+            </span>
+            <img
+              class="text-black"
+              v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
+              alt="Chevron Down"
+              src="@/assets/chevronDown.svg"
+            />
+            <img
+              v-if="currencyMenuOpenToggle"
+              alt="Chevron Up"
+              src="@/assets/chevronUp.svg"
+            />
+            <img
+              v-if="currencyMenuHoverToggle && !currencyMenuOpenToggle"
+              alt="Chevron Down Black"
+              src="@/assets/chevronDownBlack.svg"
+            />
           </div>
           <div
-            v-show="currencyMenuToggle"
+            v-show="currencyMenuOpenToggle"
             class="mt-10 absolute w-full text-black"
           >
             <div class="mt-2">
@@ -128,7 +169,9 @@ const disconnectUser = () => {
         <div class="flex flex-col">
           <div
             class="top-bar-info cursor-pointer"
-            @click="menuOpenToggle = !menuOpenToggle"
+            @click="
+              [(menuOpenToggle = !menuOpenToggle), (currencyMenuOpenToggle = false)]
+            "
             @mouseover="menuHoverToggle = true"
             @mouseout="menuHoverToggle = false"
             :style="{