From 594211063c9cad3df9d583d7638012aa5cebf258 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Sun, 1 Jan 2023 18:25:33 -0300
Subject: [PATCH] feat(home): ajustando footer top mobile, adicionando
 funcionalidade de ul fechadas e abrindo com click

---
 .../{FooterTop.module.scss => FooterTop.scss} |  30 +++++
 src/components/Footer/FooterTop/FooterTop.tsx | 114 +++++++++++-------
 2 files changed, 99 insertions(+), 45 deletions(-)
 rename src/components/Footer/FooterTop/{FooterTop.module.scss => FooterTop.scss} (80%)

diff --git a/src/components/Footer/FooterTop/FooterTop.module.scss b/src/components/Footer/FooterTop/FooterTop.scss
similarity index 80%
rename from src/components/Footer/FooterTop/FooterTop.module.scss
rename to src/components/Footer/FooterTop/FooterTop.scss
index dea2650..300deb7 100644
--- a/src/components/Footer/FooterTop/FooterTop.module.scss
+++ b/src/components/Footer/FooterTop/FooterTop.scss
@@ -32,6 +32,8 @@
 
         @media #{$mq-tablet}, #{$mq-mobile} {
             margin: 0;
+            width: 100%;
+            align-items: flex-start;
         }
 
         &__title {
@@ -49,7 +51,35 @@
             @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
                 font-size: 14px;
                 line-height: 16px;
+            }
 
+            @media #{$mq-tablet}, #{$mq-mobile} {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                &::after {
+                    content: '+';
+                    font-family: $font-family;
+                    font-style: normal;
+                    font-weight: 500;
+                    font-size: 14px;
+                    line-height: 16px;
+                    text-transform: uppercase;
+                    color: $color-black-500;
+
+                }
+            }
+
+            &.opened {
+                &::after {
+                    content: '-';
+                }
+            }
+
+            &.opened ~ .footer__top__block__item-list{
+                display: flex;
+                margin-bottom: 12px;
             }
         }
 
diff --git a/src/components/Footer/FooterTop/FooterTop.tsx b/src/components/Footer/FooterTop/FooterTop.tsx
index c0ba663..b46572a 100644
--- a/src/components/Footer/FooterTop/FooterTop.tsx
+++ b/src/components/Footer/FooterTop/FooterTop.tsx
@@ -1,4 +1,6 @@
-import styles from './FooterTop.module.scss'
+import { useState } from 'react';
+
+import './FooterTop.scss'
 
 import facebook from '../../../assets/imgs/logo-facebook.png';
 import instagram from '../../../assets/imgs/logo-instagram.png';
@@ -7,118 +9,140 @@ import youtube from '../../../assets/imgs/logo-youtube.png';
 import linkedin from '../../../assets/imgs/logo-linkedin.png';
 
 const FooterTop = () => {
-    return (
-        <section className={styles['footer__top']}>
-            <div className={styles['footer__top__wrapper']}>
-                <div className={styles['footer__top__block']}>
-                    <h4 className={styles['footer__top__block__title']}> INSTITUCIONAL </h4>
 
-                    <ul className={styles['footer__top__block__item-list']}>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+    const [ulIsVisible, setUlIsVisible] = useState(false);
+
+    const handleClick = () => {
+        const titles = document.querySelectorAll('.footer__top__block__title');
+
+        for (let index = 0; index < titles.length; index++) {
+            const element = titles[index];
+
+            element.addEventListener('click', () => {
+                if (ulIsVisible) {
+                    setUlIsVisible(false)
+                    element.classList.remove('opened');
+                } else {
+                    setUlIsVisible(true)
+                    element.classList.add('opened')
+                }
+            })
+        }
+
+    }
+
+    return (
+        <section className={'footer__top'}>
+            <div className={'footer__top__wrapper'}>
+                <div className={'footer__top__block'}>
+                    <h4 className={`footer__top__block__title`}   onClick={handleClick}> INSTITUCIONAL </h4>
+
+                    <ul className={'footer__top__block__item-list'}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 Quem Somos
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 Política de Privacidade
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 Segurança
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 Seja um Revendedor
                             </a>
                         </li>
                     </ul>
                 </div>
 
-                <div className={styles['footer__top__block']}>
-                    <h4 className={styles['footer__top__block__title']}> DÚVIDAS </h4>
+                <div className={'footer__top__block'}>
+                    <h4 className={`footer__top__block__title`}   onClick={handleClick}> DÚVIDAS </h4>
 
-                    <ul className={styles['footer__top__block__item-list']}>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                    <ul className={'footer__top__block__item-list'}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 Entrega
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 Pagamento
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 Trocas e Devoluções
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                        <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                        <a href="/" className={'footer__top__block__link'}>
                                 Dúvidas Frequentes
                             </a>
                         </li>
                     </ul>
                 </div>
 
-                <div className={styles['footer__top__block']}>
-                    <h4 className={styles['footer__top__block__title']}> Fale Conosco </h4>
+                <div className={'footer__top__block'}>
+                    <h4 className={`footer__top__block__title`}   onClick={handleClick}>  Fale Conosco </h4>
 
-                    <ul className={styles['footer__top__block__item-list']}>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                    <ul className={'footer__top__block__item-list'}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 <strong>Atendimento Ao <br/> Consumidor</strong>
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 (11) 4159 9504
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 <strong>Atendimento Online</strong>
                             </a>
                         </li>
-                        <li className={styles['footer__top__block__item']}>
-                            <a href="/" className={styles['footer__top__block__link']}>
+                        <li className={'footer__top__block__item'}>
+                            <a href="/" className={'footer__top__block__link'}>
                                 (11) 99433-8825
                             </a>
                         </li>
                     </ul>
                 </div>
-                <div className={styles['footer__top__block-social']}>
-                    <ul className={styles['footer__top__block-social__social-medias']}>
-                        <li className={styles['footer__top__block-social__social-medias__logo']}>
+                <div className={'footer__top__block-social'}>
+                    <ul className={'footer__top__block-social__social-medias'}>
+                        <li className={'footer__top__block-social__social-medias__logo'}>
                             <a href="/" target='_blank' rel='noreferrer' >
                                 <img src={facebook} alt="Logo Facebook" />
                             </a>
                         </li>
-                        <li className={styles['footer__top__block-social__social-medias__logo']}>
+                        <li className={'footer__top__block-social__social-medias__logo'}>
                             <a href="/" target='_blank' rel='noreferrer' >
                                 <img src={instagram} alt="Logo instagram" />
                             </a>
                         </li>
-                        <li className={styles['footer__top__block-social__social-medias__logo']}>
+                        <li className={'footer__top__block-social__social-medias__logo'}>
                             <a href="/" target='_blank' rel='noreferrer' >
                                 <img src={twitter} alt="Logo twitter" />
                             </a>
                         </li>
-                        <li className={styles['footer__top__block-social__social-medias__logo']}>
+                        <li className={'footer__top__block-social__social-medias__logo'}>
                             <a href="/" target='_blank' rel='noreferrer' >
                                 <img src={youtube} alt="Logo youtube" />
                             </a>
                         </li>
-                        <li className={styles['footer__top__block-social__social-medias__logo']}>
+                        <li className={'footer__top__block-social__social-medias__logo'}>
                             <a href="/" target='_blank' rel='noreferrer' >
                                 <img src={linkedin} alt="Logo linkedin" />
                             </a>
                         </li>
                     </ul>
-                    <span className={styles['footer__top__block-social__social-medias__site']}>www.loremipsum.com</span>
+                    <span className={'footer__top__block-social__social-medias__site'}>www.loremipsum.com</span>
                 </div>
             </div>