Merge pull request #11 from liftlearning/feat-currency-menu

feat: add currency menu

src/components/TopBar.vue

@@ -13,6 +13,9 @@ const { walletAddress, balance } = storeToRefs(etherStore);
 const menuOpenToggle = ref<boolean>(false);
 const menuHoverToggle = ref<boolean>(false);
 
+const currencyMenuOpenToggle = ref<boolean>(false);
+const currencyMenuHoverToggle = ref<boolean>(false);
+
 //Methods
 const connectMetaMask = () => {
   blockchain.connectProvider();
@@ -46,25 +49,129 @@ 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"
+      <button
-        @click="connectMetaMask()">
+        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">
+        <div class="flex flex-col">
-          <img alt="Ethereum image" src="@/assets/ethereum.svg" />
+          <div
-          <span class="default-text"> Ethereum </span>
+            class="group top-bar-info cursor-pointer hover:bg-white"
-          <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+            @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"
+              :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="currencyMenuOpenToggle"
+            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
             class="top-bar-info cursor-pointer"
-            @click="menuOpenToggle = !menuOpenToggle"
+            @click="
+              [(menuOpenToggle = !menuOpenToggle), (currencyMenuOpenToggle = false)]
+            "
             @mouseover="menuHoverToggle = true"
             @mouseout="menuHoverToggle = false"
             :style="{
@@ -105,11 +212,8 @@ const disconnectUser = () => {
               src="@/assets/chevronDownBlack.svg"
             />
           </div>
-          <div
+          <div v-show="menuOpenToggle" class="mt-10 absolute w-full text-black">
-            v-show="menuOpenToggle"
+            <div class="mt-2">
-            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"
@@ -174,6 +278,6 @@ header {
 }
 
 .menu-button:hover {
-  background-color: #E5E7EB;
+  background-color: #e5e7eb;
 }
 </style>