From f1154f48c420eaa575e200040d5f84ea7ab693b9 Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Wed, 4 Jan 2023 15:32:08 -0300
Subject: [PATCH] feat: adiciona menu accordion

---
 src/components/Footer/index.tsx             |   8 +-
 src/components/FooterTop/index.tsx          | 150 +++++++++++++-------
 src/components/FooterTop/styles.module.scss |  46 +++++-
 src/pages/Institutional/index.tsx           |   4 +-
 4 files changed, 150 insertions(+), 58 deletions(-)

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index abaef8c..8290575 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -3,11 +3,15 @@ import { FooterBottom } from "../FooterBottom";
 import { FooterTop } from "../FooterTop";
 import { NewsLetter } from "../NewsLetter";
 
-const Footer = () => {
+interface FooterProps {
+  windowWidth: number;
+}
+
+const Footer = ({ windowWidth }: FooterProps) => {
   return (
     <footer>
       <NewsLetter />
-      <FooterTop />
+      <FooterTop windowWidth={windowWidth} />
       <FooterBottom />
     </footer>
   );
diff --git a/src/components/FooterTop/index.tsx b/src/components/FooterTop/index.tsx
index 6df76c7..2201761 100644
--- a/src/components/FooterTop/index.tsx
+++ b/src/components/FooterTop/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./styles.module.scss";
 import facebook from "../../assets/images/facebook.png";
 import instagram from "../../assets/images/instagram.png";
@@ -6,66 +6,110 @@ import twitter from "../../assets/images/twitter.png";
 import youTube from "../../assets/images/youTube.png";
 import linkedIn from "../../assets/images/linkedIn.png";
 
-const FooterTop = () => {
+interface FooterTopProps {
+  windowWidth: number;
+}
+
+interface AccordionProps extends FooterTopProps {
+  title: string;
+  content: string[];
+}
+
+const Accordion = ({ title, content, windowWidth }: AccordionProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    if (windowWidth > 1024) {
+      setIsActive(true);
+    } else if (windowWidth <= 1024) {
+      setIsActive(false);
+    }
+  }, [windowWidth]);
+
+  return (
+    <div>
+      <div className={styles["menuLists-title"]}>
+        <h1>{title}</h1>
+        <button type="button" onClick={() => setIsActive(!isActive)}>
+          {isActive ? "-" : "+"}
+        </button>
+      </div>
+      {isActive && (
+        <ul>
+          {content.map((item) => (
+            <li key={item}>
+              <a href="#">{item}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+const FooterTop = ({ windowWidth }: FooterTopProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    if (windowWidth > 1024) {
+      setIsActive(true);
+    } else if (windowWidth <= 1024) {
+      setIsActive(false);
+    }
+  }, [windowWidth]);
+
+  const accordionData = [
+    {
+      title: "Institucional",
+      content: [
+        "Quem Somos",
+        "Política de Privacidade",
+        "Segurança",
+        "Seja um Revendedor",
+      ],
+    },
+    {
+      title: "Dúvidas",
+      content: [
+        "Entrega",
+        "Pagamento",
+        "Trocas e Devoluções",
+        "Dúvidas Frequentes",
+      ],
+    },
+  ];
+
   return (
     <div className={styles["footerTop"]}>
       <div className={styles["footerTop__content"]}>
         <div className={styles["footerTop__menuList"]}>
-          <div>
-            <div className={styles["menuLists-title"]}>
-              <h1>Institucional</h1>
-              <button></button>
-            </div>
-            <ul>
-              <li>
-                <a href="#">Quem Somos</a>
-              </li>
-              <li>
-                <a href="#">Política de Privacidade</a>
-              </li>
-              <li>
-                <a href="#">Segurança</a>
-              </li>
-              <li>
-                <a href="#">Seja um Revendedor</a>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <div className={styles["menuLists-title"]}>
-              <h1>Dúvidas</h1>
-              <button></button>
-            </div>
-            <ul>
-              <li>
-                <a href="#">Entrega</a>
-              </li>
-              <li>
-                <a href="#">Pagamento</a>
-              </li>
-              <li>
-                <a href="#">Troca e Devoluções</a>
-              </li>
-              <li>
-                <a href="#">Dúvidas Frquentes</a>
-              </li>
-            </ul>
-          </div>
+          {accordionData.map(({ title, content }) => (
+            <Accordion
+              key={title}
+              title={title}
+              content={content}
+              windowWidth={windowWidth}
+            />
+          ))}
           <div>
             <div className={styles["menuLists-title"]}>
               <h1>Fale Conosco</h1>
-              <button></button>
+              <button type="button" onClick={() => setIsActive(!isActive)}>
+                {isActive ? "-" : "+"}
+              </button>
             </div>
-            <ul>
-              <h2>Atendimento Ao Consumidor</h2>
-              <li>
-                <p>&#40;11&#41; 4159 9504</p>
-              </li>
-              <h2>Atendimento Online</h2>
-              <li>
-                <p>&#40;11&#41; 99433-8825</p>
-              </li>
-            </ul>
+            {isActive && (
+              <ul>
+                <h2>Atendimento Ao Consumidor</h2>
+                <li>
+                  <p>&#40;11&#41; 4159 9504</p>
+                </li>
+                <h2>Atendimento Online</h2>
+                <li>
+                  <p>&#40;11&#41; 99433-8825</p>
+                </li>
+              </ul>
+            )}
           </div>
         </div>
         <div className={styles["footerTop__socialMedia"]}>
diff --git a/src/components/FooterTop/styles.module.scss b/src/components/FooterTop/styles.module.scss
index efed8f1..a9d3242 100644
--- a/src/components/FooterTop/styles.module.scss
+++ b/src/components/FooterTop/styles.module.scss
@@ -4,7 +4,7 @@
   border-width: 0px 0px 1px 1px;
   border-style: solid;
   border-color: var(--black-500);
-  height: 239px;
+  height: auto;
   padding: 50px 0;
 
   &__content {
@@ -21,8 +21,18 @@
     margin-right: 50px;
 
     .menuLists-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       height: 14px;
       margin-bottom: 12px;
+
+      button {
+        display: none;
+        border: none;
+        background: transparent;
+        font-size: 18px;
+      }
     }
 
     h1 {
@@ -83,6 +93,40 @@
     }
   }
 
+  @media (max-width: 1024px) {
+    padding: 24px 16px 30px 16px;
+
+    &__content {
+      width: 100%;
+      flex-direction: column;
+    }
+
+    &__menuList {
+      flex-direction: column;
+      margin: 0;
+      width: 100%;
+      gap: 12px;
+
+      .menuLists-title {
+        button {
+          display: block;
+        }
+      }
+
+      h1 {
+        text-transform: none;
+      }
+    }
+
+    &__socialMedia {
+      height: 35px;
+
+      .socialMeida-site {
+        display: none;
+      }
+    }
+  }
+
   @media (min-width: 2500px) {
     height: 297px;
 
diff --git a/src/pages/Institutional/index.tsx b/src/pages/Institutional/index.tsx
index 170ba88..d44d0c8 100644
--- a/src/pages/Institutional/index.tsx
+++ b/src/pages/Institutional/index.tsx
@@ -6,7 +6,7 @@ import { MenuMobileModal } from "../../components/MunuMobileModal";
 
 const Institutional = () => {
   const [menuMobileModal, setMenuMobileModal] = useState(false);
-  const [windowWidth, setWindowWidth] = useState(0);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   useEffect(() => {
     window.addEventListener("resize", windowResize);
@@ -27,7 +27,7 @@ const Institutional = () => {
       />
       <Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
       <InstitutionalMain />
-      <Footer />
+      <Footer windowWidth={windowWidth} />
     </>
   );
 };