From 149f0e47671889d6876670ae609ff7aac7664113 Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Sat, 12 Oct 2024 13:09:34 -0300
Subject: [PATCH] Apply transitions to all dropdowns

---
 src/components/SearchComponent.vue            |  50 ++--
 .../SellerSteps/WantSellComponent.vue         |  50 ++--
 src/components/TopBar/TopBar.vue              | 226 +++++++++---------
 3 files changed, 168 insertions(+), 158 deletions(-)

diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 43abcd2..4adb054 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -193,33 +193,35 @@ watch(walletAddress, (): void => {
                 src="@/assets/chevronDownBlack.svg"
               />
             </button>
-            <div
-              v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 absolute"
-            >
-              <div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
-                <div
-                  v-for="token in TokenEnum"
-                  class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
-                  @click="handleSelectedToken(token)"
-                >
-                  <img
-                    :alt="token + ' logo'"
-                    width="20"
-                    height="20"
-                    :src="getTokenImage(token)"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+            <transition name="dropdown">
+              <div
+                v-if="selectTokenToggle"
+                class="mt-2 w-[100px] text-gray-900 absolute"
+              >
+                <div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
+                  <div
+                    v-for="token in TokenEnum"
+                    class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
+                    @click="handleSelectedToken(token)"
                   >
-                    {{ token }}
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
+                    <img
+                      :alt="token + ' logo'"
+                      width="20"
+                      height="20"
+                      :src="getTokenImage(token)"
+                    />
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ token }}
+                    </span>
+                  </div>
+                  <div class="w-full flex justify-center">
+                    <hr class="w-4/5" />
+                  </div>
                 </div>
               </div>
-            </div>
+            </transition>
           </div>
         </div>
         <div class="custom-divide py-2 mb-2"></div>
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index deff145..cae3af4 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -135,33 +135,35 @@ const handleButtonClick = async (
                 src="@/assets/chevronDownBlack.svg"
               />
             </button>
-            <div
-              v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 absolute"
-            >
-              <div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
-                <div
-                  v-for="token in TokenEnum"
-                  class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
-                  @click="handleSelectedToken(token)"
-                >
-                  <img
-                    :alt="token + ' logo'"
-                    width="20"
-                    height="20"
-                    :src="getTokenImage(token)"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+            <transition name="dropdown">
+              <div
+                v-if="selectTokenToggle"
+                class="mt-2 w-[100px] text-gray-900 absolute"
+              >
+                <div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
+                  <div
+                    v-for="token in TokenEnum"
+                    class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
+                    @click="handleSelectedToken(token)"
                   >
-                    {{ token }}
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
+                    <img
+                      :alt="token + ' logo'"
+                      width="20"
+                      height="20"
+                      :src="getTokenImage(token)"
+                    />
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ token }}
+                    </span>
+                  </div>
+                  <div class="w-full flex justify-center">
+                    <hr class="w-4/5" />
+                  </div>
                 </div>
               </div>
-            </div>
+            </transition>
           </div>
         </div>
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 200f3a3..0f72662 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -111,79 +111,81 @@ onClickOutside(infoMenuRef, () => {
             Menu
           </h1>
         </button>
-        <div
-          v-show="infoMenuOpenToggle"
-          class="mt-10 absolute w-full text-gray-900 lg-view"
-        >
-          <div class="mt-2">
-            <div class="bg-white rounded-md z-10 -left-36 w-52">
-              <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  Documentação
-                </span>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <RouterLink
-                :to="'/faq'"
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-              >
-                <span
-                  class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+        <transition name="dropdown">
+          <div
+            v-show="infoMenuOpenToggle"
+            class="mt-10 absolute w-full text-gray-900 lg-view"
+          >
+            <div class="mt-2">
+              <div class="bg-white rounded-md z-10 -left-36 w-52">
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                    Documentação
+                  </span>
+                </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <RouterLink
+                  :to="'/faq'"
+                  class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 >
-                  Perguntas frequentes
-                </span>
-              </RouterLink>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <div
-                class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
-              >
-                <div class="redirect_button flex mr-4">
-                  <div class="mr-6">
-                    <a href="https://www.twitter.com/doiim">
-                      <img
-                        alt="Twitter"
-                        width="20"
-                        height="20"
-                        src="@/assets/twitterIcon.svg"
-                        class="cursor-pointer"
-                      />
-                    </a>
-                  </div>
-                  <div class="mr-6">
-                    <a href="https://www.linkedin.com/company/doiim/">
-                      <img
-                        alt="LinkedIn"
-                        width="20"
-                        height="20"
-                        src="@/assets/linkedinIcon.svg"
-                        class="cursor-pointer"
-                        href="https://www.linkedin.com/company/doiim/"
-                      />
-                    </a>
-                  </div>
-                  <div class="mr-6">
-                    <a href="https://www.github.com/doiim">
-                      <img
-                        alt="Github"
-                        width="20"
-                        height="20"
-                        src="@/assets/githubIcon.svg"
-                        class="cursor-pointer"
-                      />
-                    </a>
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+                  >
+                    Perguntas frequentes
+                  </span>
+                </RouterLink>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div
+                  class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
+                >
+                  <div class="redirect_button flex mr-4">
+                    <div class="mr-6">
+                      <a href="https://www.twitter.com/doiim">
+                        <img
+                          alt="Twitter"
+                          width="20"
+                          height="20"
+                          src="@/assets/twitterIcon.svg"
+                          class="cursor-pointer"
+                        />
+                      </a>
+                    </div>
+                    <div class="mr-6">
+                      <a href="https://www.linkedin.com/company/doiim/">
+                        <img
+                          alt="LinkedIn"
+                          width="20"
+                          height="20"
+                          src="@/assets/linkedinIcon.svg"
+                          class="cursor-pointer"
+                          href="https://www.linkedin.com/company/doiim/"
+                        />
+                      </a>
+                    </div>
+                    <div class="mr-6">
+                      <a href="https://www.github.com/doiim">
+                        <img
+                          alt="Github"
+                          width="20"
+                          height="20"
+                          src="@/assets/githubIcon.svg"
+                          class="cursor-pointer"
+                        />
+                      </a>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </transition>
       </div>
       <RouterLink
         :to="'/faq'"
@@ -246,33 +248,35 @@ onClickOutside(infoMenuRef, () => {
             </svg>
           </div>
         </div>
-        <div
-          v-show="currencyMenuOpenToggle"
-          class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
-        >
-          <div class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip">
-            <div
-              v-for="(chainData, network) in Networks"
-              class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
-              @click="networkChange(network)"
-            >
-              <img
-                :alt="chainData.chainName + ' image'"
-                width="20"
-                height="20"
-                :src="getNetworkImage(NetworkEnum[network])"
-                class="mr-2 ml-1"
-              />
-              <span class="text-gray-900 font-semibold text-sm">
-                {{ chainData.chainName }}
-              </span>
+        <transition name="dropdown">
+          <div
+            v-show="currencyMenuOpenToggle"
+            class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
+          >
+            <div class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip">
+              <div
+                v-for="(chainData, network) in Networks"
+                class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
+                @click="networkChange(network)"
+              >
+                <img
+                  :alt="chainData.chainName + ' image'"
+                  width="20"
+                  height="20"
+                  :src="getNetworkImage(NetworkEnum[network])"
+                  class="mr-2 ml-1"
+                />
+                <span class="text-gray-900 font-semibold text-sm">
+                  {{ chainData.chainName }}
+                </span>
 
-            </div>
-            <div class="w-full flex justify-center">
-              <hr class="w-4/5" />
+              </div>
+              <div class="w-full flex justify-center">
+                <hr class="w-4/5" />
+              </div>
             </div>
           </div>
-        </div>
+        </transition>
       </div>
       <button
         type="button"
@@ -322,28 +326,30 @@ onClickOutside(infoMenuRef, () => {
               </svg>
             </div>
           </div>
-          <div
-            v-show="menuOpenToggle"
-            class="mt-10 absolute w-full text-gray-900 lg-view"
-          >
-            <div class="pl-4 mt-2">
-              <div class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
-                <div class="menu-button" @click="closeMenu()">
-                  <RouterLink to="/manage_bids" class="redirect_button">
-                    Gerenciar Ofertas
-                  </RouterLink>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
-                <div class="menu-button" @click="disconnectUser">
-                  <RouterLink to="/" class="redirect_button">
-                    Desconectar
-                  </RouterLink>
+          <transition name="dropdown">
+            <div
+              v-show="menuOpenToggle"
+              class="mt-10 absolute w-full text-gray-900 lg-view"
+            >
+              <div class="pl-4 mt-2">
+                <div class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
+                  <div class="menu-button" @click="closeMenu()">
+                    <RouterLink to="/manage_bids" class="redirect_button">
+                      Gerenciar Ofertas
+                    </RouterLink>
+                  </div>
+                  <div class="w-full flex justify-center">
+                    <hr class="w-4/5" />
+                  </div>
+                  <div class="menu-button" @click="disconnectUser">
+                    <RouterLink to="/" class="redirect_button">
+                      Desconectar
+                    </RouterLink>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </transition>
         </div>
       </div>
     </div>