From 5d2b9ea8152370ae0a8409717713a7e1046d3f85 Mon Sep 17 00:00:00 2001
From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com>
Date: Wed, 4 Jan 2023 23:30:44 -0300
Subject: [PATCH] feat: adiciona funcionalidades nas listas em telas mobile e
 desktop

---
 src/components/Footer/Footer.tsx              |   6 +-
 .../FooterSelosDev/FooterSelosDev.module.scss |  34 +++---
 .../Footer/FooterSelosDev/FooterSelosDev.tsx  |   6 +-
 .../LinksFooter/LinksFooter.module.scss       |  74 ++++++------
 .../Footer/LinksFooter/LinksFooter.tsx        | 113 +++++++++++++-----
 .../Footer/Newsletter/Newsletter.module.scss  |  18 +--
 .../Footer/Newsletter/Newsletter.tsx          |   8 +-
 7 files changed, 157 insertions(+), 102 deletions(-)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 123923f..dec8e44 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import LinksFooter from "./LinksFooter/LinksFooter"
-import FooterSelosDev from "./FooterSelosDev/FooterSelosDev"
-import Newsletter from "./Newsletter/Newsletter"
+import { LinksFooter } from "./LinksFooter/LinksFooter"
+import { FooterSelosDev } from "./FooterSelosDev/FooterSelosDev"
+import { Newsletter } from "./Newsletter/Newsletter"
 
 export function Footer() {
     return (
diff --git a/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss b/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss
index 061b3d8..37e84af 100644
--- a/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss
+++ b/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss
@@ -7,7 +7,7 @@
   background-color: var(--black);
   color: var(--white);
 
-  @media screen and (max-width: 1024px) {
+  @media (max-width: 1024px) {
     display: grid;
     padding: 15px 16px;
   }
@@ -16,12 +16,12 @@
     width: 21.667%;
     min-height: 24px;
 
-    @media screen and (max-width: 1024px) {
+    @media (max-width: 1024px) {
       margin: 15px 0;
       width: 234px;
     }
 
-    @media screen and (min-width: 2500px) {
+    @media (min-width: 2500px) {
       width: 467px;
       height: 47px;
     }
@@ -34,7 +34,7 @@
       text-transform: capitalize;
       color: var(--white);
 
-      @media screen and (min-width: 2500px) {
+      @media (min-width: 2500px) {
         width: 467px;
         height: 47px;
         font-size: 20px;
@@ -47,12 +47,12 @@
     display: flex;
     width: 398.61px;
 
-    @media screen and (max-width: 1024px) {
+    @media (max-width: 1024px) {
       order: -1;
       width: 100%;
     }
 
-    @media screen and (min-width: 2500px) {
+    @media (min-width: 2500px) {
       width: 692px;
       height: 66px;
     }
@@ -63,14 +63,14 @@
       height: 34px;
       align-items: center;
 
-      @media screen and (min-width: 2500px) {
+      @media (min-width: 2500px) {
         height: 66px;
       }
 
       li {
         margin-right: 12px;
 
-        @media screen and (max-width: 1024px) {
+        @media (max-width: 1024px) {
           margin-right: 11px;
         }
 
@@ -83,12 +83,12 @@
             width: 35px;
             height: 20px;
 
-            @media screen and (max-width: 1024px) {
+            @media (max-width: 1024px) {
               width: 100%;
               height: 17px;
             }
 
-            @media screen and (min-width: 2500px) {
+            @media (min-width: 2500px) {
               width: 70px;
               height: 39.27px;
             }
@@ -98,12 +98,12 @@
             width: 54.61px;
             height: 34px;
 
-            @media screen and (max-width: 1024px) {
+            @media (max-width: 1024px) {
               width: 45px;
               height: 28px;
             }
 
-            @media screen and (min-width: 2500px) {
+            @media (min-width: 2500px) {
               width: 106px;
               height: 66px;
             }
@@ -120,7 +120,7 @@
         align-items: center;
         margin-right: 12px;
 
-        @media screen and (max-width: 1024px) {
+        @media (max-width: 1024px) {
           margin-right: 11px;
           height: 20px;
         }
@@ -131,7 +131,7 @@
   &__devs {
     display: flex;
 
-    @media screen and (max-width: 1024px) {
+    @media (max-width: 1024px) {
       width: 100%;
     }
 
@@ -153,7 +153,7 @@
         text-transform: capitalize;
         color: var(--white);
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           font-size: 20px;
           line-height: 23px;
         }
@@ -165,7 +165,7 @@
         display: flex;
         align-items: center;
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 84.22px;
           height: 30px;
         }
@@ -177,7 +177,7 @@
         display: flex;
         align-items: center;
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 54.95px;
           height: 30px;
         }
diff --git a/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx b/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx
index e16c95b..18d8671 100644
--- a/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx
+++ b/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx
@@ -13,7 +13,7 @@ import vtexCertifiedCard from "../../../assets/img/vtex.svg"
 import vtexDev from "../../../assets/img/vtex-dev.svg"
 import m3 from "../../../assets/img/m3.svg"
 
-export default function FooterSelosDev() {
+export const FooterSelosDev = () => {
 
     return (
         <section className={styleSelosDev["container"]}>
@@ -94,4 +94,6 @@ export default function FooterSelosDev() {
 
         </section>
     )
-}
\ No newline at end of file
+}
+
+export default FooterSelosDev;
\ No newline at end of file
diff --git a/src/components/Footer/LinksFooter/LinksFooter.module.scss b/src/components/Footer/LinksFooter/LinksFooter.module.scss
index 4294bfc..4e1ae69 100644
--- a/src/components/Footer/LinksFooter/LinksFooter.module.scss
+++ b/src/components/Footer/LinksFooter/LinksFooter.module.scss
@@ -2,7 +2,7 @@
   padding: 50px 100px;
   display: flex;
 
-  @media screen and (max-width: 1024px) {
+  @media (max-width: 1024px) {
     padding: 24px 16px;
     display: block;
   }
@@ -12,7 +12,7 @@
     justify-content: space-between;
     width: 65.463%;
 
-    @media screen and (max-width: 1024px) {
+    @media (max-width: 1024px) {
       display: block;
       width: 100%;
     }
@@ -27,7 +27,7 @@
         margin-bottom: 12px;
         text-transform: uppercase;
 
-        @media screen and (max-width: 1025px) {
+        @media (max-width: 1025px) {
           display: flex;
           justify-content: space-between;
         }
@@ -38,7 +38,7 @@
           width: 7.8px;
           height: 8.28px;
 
-          @media screen and (min-width: 1025px) {
+          @media (min-width: 1025px) {
             display: none;
           }
 
@@ -48,7 +48,7 @@
           }
         }
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           font-size: 28px;
           line-height: 33px;
         }
@@ -58,17 +58,21 @@
         width: 155px;
         list-style: none;
 
-        @media screen and (max-width: 1024px) {
+        @media (max-width: 1024px) {
           width: 100%;
         }
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 315px;
         }
 
         li:last-child {
           margin-bottom: 0;
           text-decoration: underline;
+
+          @media (max-width: 1024px) {
+            margin-bottom: 12px;
+          }
         }
 
         li {
@@ -80,11 +84,7 @@
           font-family: var(--font-roboto);
           color: var(--black-100);
 
-          @media screen and (max-width: 1024px) {
-            display: none;
-          }
-
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             font-size: 24px;
             line-height: 28px;
           }
@@ -99,18 +99,22 @@
       &__duvidas {
         list-style: none;
 
-        @media screen and (max-width: 1024px) {
+        @media (max-width: 1024px) {
           margin: 12px 0;
           width: 100%;
         }
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 315px;
         }
 
         li:last-child {
           margin-bottom: 0;
           text-decoration: underline;
+
+          @media (max-width: 1024px) {
+            margin-bottom: 12px;
+          }
         }
 
         li {
@@ -122,11 +126,7 @@
           font-family: var(--font-roboto);
           color: var(--black-100);
 
-          @media screen and (max-width: 1024px) {
-            display: none;
-          }
-
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             font-size: 24px;
             line-height: 28px;
           }
@@ -142,11 +142,11 @@
         width: 155px;
         list-style: none;
 
-        @media screen and (max-width: 1024px) {
+        @media (max-width: 1024px) {
           width: 100%;
         }
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 315px;
         }
 
@@ -167,7 +167,7 @@
             width: 7.8px;
             height: 8.28px;
 
-            @media screen and (min-width: 1025px) {
+            @media (min-width: 1025px) {
               display: none;
             }
 
@@ -177,7 +177,7 @@
             }
           }
 
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             font-size: 28px;
             line-height: 33px;
           }
@@ -186,6 +186,10 @@
         li:last-child {
           margin-bottom: 0;
           text-decoration: underline;
+
+          @media (max-width: 1024px) {
+            margin-bottom: 12px;
+          }
         }
 
         li:nth-child(2) {
@@ -205,11 +209,7 @@
           font-family: var(--font-roboto);
           color: var(--black-100);
 
-          @media screen and (max-width: 1024px) {
-            display: none;
-          }
-
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             font-size: 24px;
             line-height: 28px;
           }
@@ -226,7 +226,7 @@
   &__social-networks {
     width: 34.537%;
 
-    @media screen and (max-width: 1024px) {
+    @media (max-width: 1024px) {
       width: 100%;
       display: flex;
       justify-content: flex-start;
@@ -249,7 +249,7 @@
         border-radius: 50%;
         margin-right: 10px;
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 70px;
           height: 70px;
         }
@@ -261,7 +261,7 @@
           left: 9px;
           top: 4px;
 
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             width: 20.33px;
             height: 39.23px;
             left: 22px;
@@ -276,7 +276,7 @@
           left: 5px;
           top: 4px;
 
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             width: 39.29px;
             height: 39.29px;
             left: 13px;
@@ -291,7 +291,7 @@
           left: 3px;
           top: 5px;
 
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             width: 48.23px;
             height: 39.18px;
             left: 10px;
@@ -306,7 +306,7 @@
           left: 3.5px;
           top: 6.3px;
 
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             width: 44.77px;
             height: 31.35px;
             left: 11px;
@@ -321,7 +321,7 @@
           left: 7px;
           top: 5px;
 
-          @media screen and (min-width: 2500px) {
+          @media (min-width: 2500px) {
             width: 31.35px;
             height: 31.28px;
             left: 17px;
@@ -337,7 +337,7 @@
     display: flex;
     justify-content: flex-end;
 
-    @media screen and (max-width: 1024px) {
+    @media (max-width: 1024px) {
       display: none;
     }
     p {
@@ -347,7 +347,7 @@
       font-family: var(--font-roboto);
       color: var(--black-100);
 
-      @media screen and (min-width: 2500px) {
+      @media (min-width: 2500px) {
         font-weight: 400;
         font-size: 28px;
         line-height: 33px;
diff --git a/src/components/Footer/LinksFooter/LinksFooter.tsx b/src/components/Footer/LinksFooter/LinksFooter.tsx
index 7b7d3dc..2199038 100644
--- a/src/components/Footer/LinksFooter/LinksFooter.tsx
+++ b/src/components/Footer/LinksFooter/LinksFooter.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import styleLink from "./LinksFooter.module.scss"
 
 import facebook from "../../../assets/img/facebook.svg"
@@ -9,62 +9,111 @@ import linkedlin from "../../../assets/img/linkedlin.svg"
 
 import titleLinks from "../../../assets/img/titleLinks.svg"
 
-export default function LinksFooter() {
+export const LinksFooter = () => {
 
-    const titleLink = document.querySelector(".container__links__rodape__title") as HTMLHeadingElement;
-    console.log(titleLink)
+    const [openInstitucional, setOpenInstitucional] = useState<boolean>(false);
+    const [openDuvidas, setOpenDuvidas] = useState<boolean>(false);
+    const [openFaleConosco, setOpenFaleConosco] = useState<boolean>(false);
+
+
+    const handleListInstitucional = (state: boolean) => {
+        if (window.innerWidth < 1024) {
+            setOpenInstitucional(!state);
+        }
+    };
+
+    const handleListDuvidas = (state: boolean) => {
+        if (window.innerWidth < 1024) {
+            setOpenDuvidas(!state)
+        }
+    }
+
+    const handleFaleConosco = (state: boolean) => {
+        if (window.innerWidth < 1024) {
+            setOpenFaleConosco(!state)
+        }
+    }
+
+    const handleResize = () => {
+        if (window.innerWidth > 1024) {
+            setOpenInstitucional(true)
+            setOpenDuvidas(true)
+            setOpenFaleConosco(true)
+        } else {
+            setOpenInstitucional(false)
+            setOpenDuvidas(false)
+            setOpenFaleConosco(false)
+        }
+    }
+
+    useEffect(() => {
+        window.addEventListener("resize", handleResize)
+    },)
 
     return (
         <section className={styleLink["container"]}>
             <div className={styleLink["container__links"]}>
 
                 <div className={styleLink["container__links__rodape"]}>
-                    <h2 className={styleLink["container__links__rodape__title"]}>Institucional
+                    <h2
+                        onClick={() => handleListInstitucional(openInstitucional)}
+                        className={styleLink["container__links__rodape__title"]}>
+                        Institucional
+
                         <button>
                             <img src={titleLinks} alt="Imagem para expandir lista" />
                         </button>
                     </h2>
-                    <ul className={styleLink["container__links__rodape__institucional"]}>
-                        <li><a href="/teste">Quem Somos</a></li>
-                        <li><a href="/teste">Política de Privacidade</a></li>
-                        <li><a href="/teste">Segurança</a></li>
-                        <li><a href="/teste">Seja um Revendedor</a></li>
-                    </ul>
+                    {openInstitucional &&
+                        <ul className={styleLink["container__links__rodape__institucional"]}>
+                            <li><a href="/teste">Quem Somos</a></li>
+                            <li><a href="/teste">Política de Privacidade</a></li>
+                            <li><a href="/teste">Segurança</a></li>
+                            <li><a href="/teste">Seja um Revendedor</a></li>
+                        </ul>
+                    }
+
                 </div>
 
                 <div className={styleLink["container__links__rodape"]}>
-                    <h2 className={styleLink["container__links__rodape__title"]}>Dúvidas
+                    <h2 onClick={() => handleListDuvidas(openDuvidas)} className={styleLink["container__links__rodape__title"]}>Dúvidas
                         <button>
                             <img src={titleLinks} alt="Imagem para expandir lista" />
                         </button>
                     </h2>
-                    <ul className={styleLink["container__links__rodape__duvidas"]}>
-                        <li><a href="/teste">Entrega</a></li>
-                        <li><a href="/teste">Pagamento</a></li>
-                        <li><a href="/teste">Trocas e Devoluções</a></li>
-                        <li><a href="/teste">Dúvidas Frequentes</a></li>
-                    </ul>
+
+                    {openDuvidas &&
+                        <ul className={styleLink["container__links__rodape__duvidas"]}>
+                            <li><a href="/teste">Entrega</a></li>
+                            <li><a href="/teste">Pagamento</a></li>
+                            <li><a href="/teste">Trocas e Devoluções</a></li>
+                            <li><a href="/teste">Dúvidas Frequentes</a></li>
+                        </ul>
+                    }
                 </div>
 
                 <div className={styleLink["container__links__rodape"]}>
-                    <h2 className={styleLink["container__links__rodape__title"]}>Fale Conosco
+                    <h2 onClick={() => handleFaleConosco(openFaleConosco)} className={styleLink["container__links__rodape__title"]}>Fale Conosco
                         <button className={styleLink["button"]}>
                             <img src={titleLinks} alt="Imagem para expandir lista" />
                         </button>
                     </h2>
-                    <ul className={styleLink["container__links__rodape__fale-conosco"]}>
-                        <li><a href="/teste">Atendimento ao Consumidor</a></li>
-                        <li><a href="/teste">{"(11) 4159 9504"}</a></li>
-                        <li><a href="/teste">Atendimento Online</a></li>
-                        <li><a href="/teste">{"(11) 99433-8825"}</a></li>
-                    </ul>
+                    {openFaleConosco &&
+                        <ul className={styleLink["container__links__rodape__fale-conosco"]}>
+                            <li><a href="/teste">Atendimento ao Consumidor</a></li>
+                            <li><a href="/teste">{"(11) 4159 9504"}</a></li>
+                            <li><a href="/teste">Atendimento Online</a></li>
+                            <li><a href="/teste">{"(11) 99433-8825"}</a></li>
+                        </ul>
+                    }
+
                 </div>
             </div>
 
             <div className={styleLink["container__social-networks"]}>
                 <ul className={styleLink["container__social-networks__circles"]}>
                     <li>
-                        <a href="/teste">
+                        <a href="/">
                             <figure>
                                 <img className={styleLink["facebook"]} src={facebook} alt="Imagem Facebook" />
                             </figure>
@@ -72,7 +121,7 @@ export default function LinksFooter() {
                     </li>
 
                     <li>
-                        <a href="/teste">
+                        <a href="/">
                             <figure>
                                 <img className={styleLink["instagram"]} src={instagram} alt="Imagem Instagram" />
                             </figure>
@@ -80,7 +129,7 @@ export default function LinksFooter() {
                     </li>
 
                     <li>
-                        <a href="/teste">
+                        <a href="/">
                             <figure>
                                 <img className={styleLink["twitter"]} src={twitter} alt="Imagem Twitter" />
                             </figure>
@@ -88,7 +137,7 @@ export default function LinksFooter() {
                     </li>
 
                     <li>
-                        <a href="/teste">
+                        <a href="/">
                             <figure>
                                 <img className={styleLink["youtube"]} src={youtube} alt="Imagem Youtube" />
                             </figure>
@@ -96,7 +145,7 @@ export default function LinksFooter() {
                     </li>
 
                     <li>
-                        <a href="/teste">
+                        <a href="/">
                             <figure>
                                 <img className={styleLink["linkedlin"]} src={linkedlin} alt="Imagem Linkedlin" />
                             </figure>
@@ -110,4 +159,6 @@ export default function LinksFooter() {
             </div>
         </section>
     )
-}
\ No newline at end of file
+}
+
+export default LinksFooter;
\ No newline at end of file
diff --git a/src/components/Footer/Newsletter/Newsletter.module.scss b/src/components/Footer/Newsletter/Newsletter.module.scss
index ae0916f..b170475 100644
--- a/src/components/Footer/Newsletter/Newsletter.module.scss
+++ b/src/components/Footer/Newsletter/Newsletter.module.scss
@@ -9,12 +9,12 @@
     padding: 16px 0;
     width: 474px;
 
-    @media screen and (max-width: 1024px) {
+    @media (max-width: 1024px) {
       width: 100%;
       padding: 16px;
     }
 
-    @media screen and (min-width: 2500px) {
+    @media (min-width: 2500px) {
       width: 922px;
     }
 
@@ -26,13 +26,13 @@
       letter-spacing: 0.05em;
       font-variant: small-caps;
 
-      @media screen and (max-width: 1024px) {
+      @media (max-width: 1024px) {
         font-weight: 500;
         font-size: 14px;
         line-height: 16px;
       }
 
-      @media screen and (min-width: 2500px) {
+      @media (min-width: 2500px) {
         font-weight: 500;
         font-size: 36px;
         line-height: 42px;
@@ -43,7 +43,7 @@
       display: flex;
       align-items: flex-end;
 
-      @media screen and (max-width: 1024px) {
+      @media (max-width: 1024px) {
         display: block;
       }
       input {
@@ -59,13 +59,13 @@
         font-size: 14px;
         line-height: 16px;
 
-        @media screen and (max-width: 1024px) {
+        @media (max-width: 1024px) {
           width: 100%;
           height: 50px;
           margin: 16px 0;
         }
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 668px;
           height: 59px;
           font-size: 28px;
@@ -93,14 +93,14 @@
         letter-spacing: 0.05em;
         color: var(--white);
 
-        @media screen and (max-width: 1024px) {
+        @media (max-width: 1024px) {
           width: 100%;
           height: 50px;
           font-size: 14px;
           line-height: 16px;
         }
 
-        @media screen and (min-width: 2500px) {
+        @media (min-width: 2500px) {
           width: 246px;
           height: 59px;
           font-size: 24px;
diff --git a/src/components/Footer/Newsletter/Newsletter.tsx b/src/components/Footer/Newsletter/Newsletter.tsx
index 7e35dda..40858f7 100644
--- a/src/components/Footer/Newsletter/Newsletter.tsx
+++ b/src/components/Footer/Newsletter/Newsletter.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import styleNewsletter from "./Newsletter.module.scss"
 
-export default function Newsletter() {
+export const Newsletter = () => {
     return (
         <section className={styleNewsletter["container"]}>
 
@@ -9,11 +9,13 @@ export default function Newsletter() {
                 <p>ASSINE NOSSA NEWSLETTER</p>
                 <div className={styleNewsletter["container__wrapper__input-button"]}>
                     <input type="email" placeholder="E-mail" />
-                    <button>
+                    <button type="submit">
                         ENVIAR
                     </button>
                 </div>
             </div>
         </section >
     )
-}
\ No newline at end of file
+}
+
+export default Newsletter 
\ No newline at end of file