From a7ed7b227469ce1136be908c9ffdea8fb94030be Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Sat, 14 Jan 2023 15:26:56 -0300
Subject: [PATCH] feat(footer-top): Torna footer top responsivo para mobile com
 menu estilo acordeon

---
 src/components/FooterTop.tsx          |  2 +
 src/components/FooterTopMobile.tsx    | 62 ++++++++++++++++++++++
 src/components/footer-top.module.scss | 74 +++++++++++++++++++++++++++
 3 files changed, 138 insertions(+)
 create mode 100644 src/components/FooterTopMobile.tsx

diff --git a/src/components/FooterTop.tsx b/src/components/FooterTop.tsx
index a90db36..5af60d0 100644
--- a/src/components/FooterTop.tsx
+++ b/src/components/FooterTop.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { DropDownItem } from "../atomo/DropDownItem";
 import { SocialMediaItem } from "../atomo/SocialMediaItem";
+import { FooterTopMobile } from "./FooterTopMobile";
 import style from "../components/footer-top.module.scss";
 
 import facebook from "../assets/svgs/facebookicon.svg";
@@ -13,6 +14,7 @@ const FooterTop = () => {
   return (
     <footer className={style["footer-container"]}>
       <div className={style["footer-wrapper"]}>
+        <FooterTopMobile />
         <section className={style["footer-list-wrapper"]}>
           <ul className={style["footer-list"]}>
             <h3>Institucional</h3>
diff --git a/src/components/FooterTopMobile.tsx b/src/components/FooterTopMobile.tsx
new file mode 100644
index 0000000..eeae62c
--- /dev/null
+++ b/src/components/FooterTopMobile.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import {
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+  AccordionItem,
+} from "react-headless-accordion";
+import style from "../components/footer-top.module.scss";
+// import { DropDownItem } from "../atomo/DropDownItem";
+
+const FooterTopMobile = () => {
+  return (
+    <Accordion className={style["footer-accordion"]}>
+      <AccordionItem>
+        <AccordionHeader className={style["footer-button"]}>
+          <h3>Institucional</h3>
+        </AccordionHeader>
+
+        <AccordionBody className={style["footer-list-accordion"]}>
+          <div className={style["footer-list-item"]}>
+            <a href="/">Quem Somos</a>
+            <a href="/">Política de Privacidade</a>
+            <a href="/">Segurança</a>
+            <a href="/">Seja um Revendedor</a>
+          </div>
+        </AccordionBody>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionHeader className={style["footer-button"]}>
+          <h3>Dúvidas</h3>
+        </AccordionHeader>
+
+        <AccordionBody className={style["footer-list-accordion"]}>
+          <div className={style["footer-list-item"]}>
+            <a href="/">Entrega</a>
+            <a href="/">Pagamento</a>
+            <a href="/">Trocas e Devoluções</a>
+            <a href="/">Dúvidas Frequentes</a>
+          </div>
+        </AccordionBody>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionHeader className={style["footer-button"]}>
+          <h3>Fale Conosco</h3>
+        </AccordionHeader>
+
+        <AccordionBody className={style["footer-list-accordion"]}>
+          <div className={style["footer-list-item"]}>
+            <h4>Atendimento ao Consumidor</h4>
+            <a href="/">(11) 4159-9504</a>
+            <h4>Atendimento Online</h4>
+            <a href="/">(11) 99433-8825</a>
+          </div>
+        </AccordionBody>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export { FooterTopMobile };
diff --git a/src/components/footer-top.module.scss b/src/components/footer-top.module.scss
index 1589bb4..6536e1c 100644
--- a/src/components/footer-top.module.scss
+++ b/src/components/footer-top.module.scss
@@ -7,6 +7,7 @@
   border-top: 1px solid variables.$color-black;
 
   display: flex;
+  position: relative;
 
   .footer-wrapper {
     display: flex;
@@ -15,10 +16,80 @@
     margin: 0 auto;
     width: 80.46875%;
 
+    //mobile
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+      flex-direction: column;
+      padding: 24px 16px;
+    }
+
+    .footer-accordion {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: space-between;
+      z-index: 5;
+      width: 100%;
+
+      .footer-button {
+        outline: 0;
+        border: 0;
+        background: variables.$color-white;
+        width: 100%;
+        padding: 12px 0;
+        display: flex;
+        justify-content: space-between;
+
+        &::after {
+          content: "+";
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          color: variables.$color-black3;
+        }
+
+        h3 {
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          text-transform: capitalize;
+
+          color: variables.$color-black3;
+        }
+      }
+
+      .footer-list-accordion {
+        width: 100%;
+      }
+
+      .footer-list-item {
+        display: flex;
+        flex-direction: column;
+        background: variables.$color-white;
+        width: 100%;
+
+        a {
+          text-decoration: none;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          text-transform: capitalize;
+          margin-top: 6px;
+          color: variables.$color-grey;
+        }
+      }
+    }
+
+    //desktop
+
     .footer-list-wrapper {
       display: flex;
       gap: 121px;
 
+      @media screen and (max-width: 1024px) {
+        display: none;
+      }
+
       .footer-list {
         display: flex;
         flex-direction: column;
@@ -56,6 +127,9 @@
     display: flex;
     flex-direction: column;
     gap: 12px;
+    position: absolute;
+    bottom: 20px;
+    z-index: 1;
 
     .footer-social-media-wrapper {
       display: flex;