From e37446003861f936550521dd7f4c155278e6057b Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Thu, 12 Jan 2023 01:55:52 -0300
Subject: [PATCH] =?UTF-8?q?feat(footer):=20Estiliza=20e=20aplica=20funcion?=
 =?UTF-8?q?alidade=20ao=20menu=20do=20footer=20top=20para=20mobile=20e=20f?=
 =?UTF-8?q?az=20uma=20pequena=20adapta=C3=A7=C3=A3o=20para=20desktop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FooterMenu/FooterMenu.module.scss         | 69 +++++++++++++-
 src/components/FooterMenu/FooterMenu.tsx      | 90 +++++++++++++------
 .../FooterTop/FooterTop.module.scss           |  7 ++
 3 files changed, 135 insertions(+), 31 deletions(-)

diff --git a/src/components/FooterMenu/FooterMenu.module.scss b/src/components/FooterMenu/FooterMenu.module.scss
index 25a979c..9facceb 100644
--- a/src/components/FooterMenu/FooterMenu.module.scss
+++ b/src/components/FooterMenu/FooterMenu.module.scss
@@ -8,14 +8,30 @@
         gap: 293px;
     }
 
-    &__items {
+    @media ((min-width: 1025px) and (max-width: 1170px)) {
+        gap: 75px;
+    }
 
+    @media (max-width: 1024px) {
+        flex-direction: column;
+        gap: 0;
+    }
+
+    &__top {
+        
         &__title,
         &__item,
         &__item-title {
             color: variables.$black-300;
             margin-bottom: 12px;
         }
+        
+        &__title-wrapper {
+            @media (max-width: 1024px) {
+                display: flex;
+                justify-content: space-between;
+            }
+        }
 
         &__title {
             font-weight: 500;
@@ -23,26 +39,73 @@
             line-height: 16px;
             text-transform: uppercase;
 
+            @media (max-width: 1024px) {
+                cursor: pointer;
+
+                &:hover {
+                    filter: contrast(60%);
+                }
+            }
+            
             @media (min-width: 2500px) {
                 font-size: 28px;
                 line-height: 33px;
             }
         }
 
+        &__plus-sign {
+            font-weight: 500;
+            color: variables.$black-300;
+            cursor: pointer;
+
+            &:hover {
+                filter: contrast(60%);
+            }
+
+            @media (min-width: 1025px) {
+                display: none;
+            }
+        }
+
+        &__items {
+            @media (max-width: 1024px) {
+                visibility: visible;
+                opacity: 1;
+                padding-bottom: 12px;
+                transition: .3s ease;
+                transform: translateY(0);
+            }
+        }
+        
+        &__items-inactive {
+            @media (max-width: 1024px) {
+                visibility: hidden;
+                opacity: 0;
+                height: 0;
+                transform: translateY(-20%);
+            }
+        }
+
         &__item,
         &__item-title {
             font-size: 12px;
             line-height: 14px;
             text-transform: capitalize;
-
+    
             @media (min-width: 2500px) {
                 font-size: 24px;
                 line-height: 28px;
             }
         }
 
+        &__item {
+            &:hover {
+                filter:contrast(60%);
+            }
+        }
+    
         &__item-title {
             font-weight: 500;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/FooterMenu/FooterMenu.tsx b/src/components/FooterMenu/FooterMenu.tsx
index 793600b..1bbb5c5 100644
--- a/src/components/FooterMenu/FooterMenu.tsx
+++ b/src/components/FooterMenu/FooterMenu.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import {useState} from "react";
 
 import styles from "./FooterMenu.module.scss";
 
@@ -6,73 +6,107 @@ import { ItemList } from "../ItemList/ItemList";
 
 const FooterMenu = () => {
 
+    const [isActive, setIsActive] = useState(false);
+    const [isActive2, setIsActive2] = useState(false);
+    const [isActive3, setIsActive3] = useState(false);
+
   return (
     <div className={styles["footer-menu"]}>
       
-        <div className={styles["footer-menu__items"]}>
-            <h3 className={styles["footer-menu__items__title"]}>
-                INSTITUCIONAL
-            </h3>
+        <div className={styles["footer-menu__top"]}>
 
-            <ul>
+            <div className={styles["footer-menu__top__title-wrapper"]} onClick={() => setIsActive(!isActive)}>
+                <h3 className={styles["footer-menu__top__title"]}>
+                    INSTITUCIONAL
+                </h3>
+
+                <div className={styles["footer-menu__top__plus-sign"]}>
+                    {isActive ? "-" : "+"}
+                </div>
+            </div>
+
+            <ul className={isActive === true
+                ? styles["footer-menu__top__items"]
+                : styles["footer-menu__top__items-inactive"]}>
+                    
                 <a href="/">
-                <ItemList text="Quem Somos" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Quem Somos" textClassName={styles["footer-menu__top__item"]} />
                 </a>
 
                 <a href="/">
-                <ItemList text="Política de Privacidade" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Política de Privacidade" textClassName={styles["footer-menu__top__item"]} />
                 </a>
 
                 <a href="/">
-                <ItemList text="Segurança" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Segurança" textClassName={styles["footer-menu__top__item"]} />
                 </a>
 
                 <a href="/">
-                <ItemList text="Seja um Revendedor" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Seja um Revendedor" textClassName={styles["footer-menu__top__item"]} />
                 </a>
             </ul>
         </div>
 
-        <div className={styles["footer-menu__items"]}>
-            <h3 className={styles["footer-menu__items__title"]}>
-                DÚVIDAS
-            </h3>
+        <div className={styles["footer-menu__top"]}>
+
+            <div className={styles["footer-menu__top__title-wrapper"]} onClick={() => setIsActive2(!isActive2)}>
+                <h3 className={styles["footer-menu__top__title"]}>
+                    DÚVIDAS
+                </h3>
+
+                <div className={styles["footer-menu__top__plus-sign"]}>
+                    {isActive2 ? "-" : "+"}
+                </div>
+            </div>
+
+            <ul className={isActive2 === true
+                ? styles["footer-menu__top__items"]
+                : styles["footer-menu__top__items-inactive"]}>
 
-            <ul>
                 <a href="/">
-                <ItemList text="Entrega" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Entrega" textClassName={styles["footer-menu__top__item"]} />
                 </a>
 
                 <a href="/">
-                <ItemList text="Pagamento" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Pagamento" textClassName={styles["footer-menu__top__item"]} />
                 </a>
 
                 <a href="/">
-                <ItemList text="Trocas e Devoluções" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Trocas e Devoluções" textClassName={styles["footer-menu__top__item"]} />
                 </a>
 
                 <a href="/">
-                <ItemList text="Dúvidas Frequentes" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="Dúvidas Frequentes" textClassName={styles["footer-menu__top__item"]} />
                 </a>
             </ul>
         </div>
 
-        <div className={styles["footer-menu__items"]}>
-            <h3 className={styles["footer-menu__items__title"]}>
-                FALE CONOSCO
-            </h3>
+        <div className={styles["footer-menu__top"]}>
 
-            <ul>
-                <ItemList text="Atendimento ao Consumidor" textClassName={styles["footer-menu__items__item-title"]} />
+            <div className={styles["footer-menu__top__title-wrapper"]} onClick={() => setIsActive3(!isActive3)}>
+                <h3 className={styles["footer-menu__top__title"]}>
+                    FALE CONOSCO
+                </h3>
+
+                <div className={styles["footer-menu__top__plus-sign"]}>
+                    {isActive3 ? "-" : "+"}
+                </div>
+            </div>
+
+            <ul className={isActive3 === true
+                ? styles["footer-menu__top__items"]
+                : styles["footer-menu__top__items-inactive"]}>
+
+                <ItemList text="Atendimento ao Consumidor" textClassName={styles["footer-menu__top__item-title"]} />
 
                 <a href="/">
-                <ItemList text="(11) 4159-9504" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="(11) 4159-9504" textClassName={styles["footer-menu__top__item"]} />
                 </a>
 
-                <ItemList text="Atendimento Online" textClassName={styles["footer-menu__items__item-title"]} />
+                <ItemList text="Atendimento Online" textClassName={styles["footer-menu__top__item-title"]} />
 
                 <a href="/">
-                <ItemList text="(11) 99433-8825" textClassName={styles["footer-menu__items__item"]} />
+                <ItemList text="(11) 99433-8825" textClassName={styles["footer-menu__top__item"]} />
                 </a>
             </ul>
         </div>
diff --git a/src/components/FooterTop/FooterTop.module.scss b/src/components/FooterTop/FooterTop.module.scss
index 4cc5cf6..b1fd4bf 100644
--- a/src/components/FooterTop/FooterTop.module.scss
+++ b/src/components/FooterTop/FooterTop.module.scss
@@ -5,4 +5,11 @@
     justify-content: space-between;
     margin: 50px 0;
     padding: 0 100px;
+
+    @media (max-width: 1024px) {
+        flex-direction: column;
+        justify-content: flex-start;
+        margin: 24px 0;
+        padding: 0 16px;
+    }
 }