From 17b6366502c377ca41204988513c5faffdc81265 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 17 Feb 2023 13:03:57 -0300
Subject: [PATCH] Add collasible effect to withdraw component

---
 .../ListingComponent/ListingComponent.vue     | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 62d0115..9ef8990 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -19,6 +19,7 @@ const etherStore = useEtherStore();
 
 const itemsToShow = ref<Event[]>([]);
 const withdrawAmount = ref<string>("");
+const isCollapsibleOpen = ref<boolean>(false);
 
 const callWithdraw = async () => {
   if (withdrawAmount.value) {
@@ -115,7 +116,16 @@ showInitialItems();
         </div>
       </div>
       <div class="pt-5">
-        <div class="py-2 w-100">
+        <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
+          <div
+            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+            @click="[(isCollapsibleOpen = true)]"
+          >
+            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <span class="last-release-info">Sacar</span>
+          </div>
+        </div>
+        <div v-show="isCollapsibleOpen" class="py-2 w-100">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
             type="number"
@@ -126,8 +136,17 @@ showInitialItems();
             v-model="withdrawAmount"
           />
         </div>
-        <hr class="pb-3" />
-        <div class="flex justify-end items-center">
+        <hr v-show="isCollapsibleOpen" class="pb-3" />
+        <div
+          v-show="isCollapsibleOpen"
+          class="flex justify-between items-center"
+        >
+          <h1
+            @click="[(isCollapsibleOpen = false)]"
+            class="text-black font-medium cursor-pointer"
+          >
+            Cancelar
+          </h1>
           <div
             class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="callWithdraw"