From 3aa9e8c9b83a80aaa7e5ec4789c54806ac727575 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Fri, 13 Jan 2023 16:46:57 -0300
Subject: [PATCH] feat(footer): cria menu accordion nos links do footer mobile

---
 .../Footer/SiteMap/SiteMap.module.scss        |  46 +++--
 src/components/Footer/SiteMap/SiteMap.tsx     | 160 ++++++++++++++----
 2 files changed, 159 insertions(+), 47 deletions(-)

diff --git a/src/components/Footer/SiteMap/SiteMap.module.scss b/src/components/Footer/SiteMap/SiteMap.module.scss
index 10dce1f..569f240 100644
--- a/src/components/Footer/SiteMap/SiteMap.module.scss
+++ b/src/components/Footer/SiteMap/SiteMap.module.scss
@@ -15,7 +15,7 @@
     gap: 12px;
   }
 
-  .menu-list {
+  .submenu {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -25,9 +25,6 @@
     gap: 12px;
 
     .subtitle {
-      // background: yellow;
-      // display: flex;
-
       @media screen and (width <= 1024px) {
         display: flex;
         justify-content: space-between;
@@ -49,11 +46,43 @@
         }
 
         @media screen and (width <= 1024px) {
-          text-transform:none;
+          text-transform: none;
         }
+
+        // &.active {
+        // }
       }
 
       .open-icon {
+        position: relative;
+
+        &::before {
+          content: "";
+          background: #000000;
+          width: 7.8px;
+          height: 1px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+        &::after {
+          content: "";
+          background: #000000;
+          width: 1px;
+          height: 8.28px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+
+        &.active {
+          &::after {
+            display: none;
+          }
+        }
+
         @media screen and (width > 1024px) {
           display: none;
         }
@@ -64,14 +93,11 @@
       display: flex;
       flex-direction: column;
       gap: 12px;
-
-      @media screen and (width <= 1024px) {
-        display: none;
-      }
+      padding: 0;
+      list-style: none;
 
       li {
         //   transition: all 0.2s ease-in-out; hover? active?
-        // background-color: red;
 
         a {
           font-family: "Roboto";
diff --git a/src/components/Footer/SiteMap/SiteMap.tsx b/src/components/Footer/SiteMap/SiteMap.tsx
index 30ef240..df66836 100644
--- a/src/components/Footer/SiteMap/SiteMap.tsx
+++ b/src/components/Footer/SiteMap/SiteMap.tsx
@@ -1,9 +1,10 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useState, useContext } from "react";
+import { WidthContext } from "../../../contexts/WidthContext";
+import { List } from "../../List/List";
 
 import styles from "./SiteMap.module.scss";
 
-const leftInstitucionalLinks = [
+const institucionalLinks = [
   {
     name: "Quem Somos",
     value: "sobre",
@@ -41,7 +42,7 @@ const duvidasLinks = [
   },
 ];
 
-const rightInstitucionalLinks = [
+const faleConoscoLinks = [
   {
     name: "Atendimento ao Consumidor",
     phoneNumber: "(11) 4159 9504",
@@ -55,51 +56,136 @@ const rightInstitucionalLinks = [
 ];
 
 const SiteMap = () => {
+  const { isMobile } = useContext(WidthContext);
+
+  const [isActive, setIsActive] = useState({
+    institucional: false,
+    duvidas: false,
+    faleConosco: false,
+  });
+
+  const handleClick = (e: React.MouseEvent<HTMLHeadingElement, MouseEvent>) => {
+    const element = e.target as HTMLElement;
+
+    if (element.classList.contains("institucional")) {
+      setIsActive((prevState) => ({
+        ...prevState,
+        institucional: !isActive.institucional,
+      }));
+    } else if (element.classList.contains("duvidas")) {
+      setIsActive((prevState) => ({
+        ...prevState,
+        duvidas: !isActive.duvidas,
+      }));
+    } else if (element.classList.contains("faleConosco")) {
+      setIsActive((prevState) => ({
+        ...prevState,
+        faleConosco: !isActive.faleConosco,
+      }));
+    }
+  };
+
   return (
-    <div className={styles["container"]}>
-      <ul className={styles["menu-list"]}>
+    <nav className={styles["container"]}>
+      <ul className={styles["submenu"]}>
         <div className={styles["subtitle"]}>
-          <h4 className={styles["subtitle-text"]}>Institucional</h4>
-          <span className={styles["open-icon"]}>+</span>
-        </div>
-        <div className={styles["list-items"]}>
-          {leftInstitucionalLinks.map((item, index) => (
-            <li key={index}>
-              <Link to={item.value}>{item.name}</Link>
-            </li>
-          ))}
+          <h4
+            className={
+              isActive.institucional
+                ? `${styles["subtitle-text"]} ${styles["active"]} institucional`
+                : `${styles["subtitle-text"]} institucional`
+            }
+            onClick={handleClick}
+          >
+            Institucional
+          </h4>
+          <span
+            className={
+              isActive.institucional
+                ? `${styles["open-icon"]} ${styles["active"]} institucional`
+                : `${styles["open-icon"]} institucional`
+            }
+            onClick={handleClick}
+          ></span>
         </div>
+        {isMobile ? (
+          isActive.institucional && (
+            <List
+              className={styles["list-items"]}
+              itemsList={institucionalLinks}
+            />
+          )
+        ) : (
+          <List
+            className={styles["list-items"]}
+            itemsList={institucionalLinks}
+          />
+        )}
       </ul>
 
-      <ul className={styles["menu-list"]}>
+      <ul className={styles["submenu"]}>
         <div className={styles["subtitle"]}>
-          <h4 className={styles["subtitle-text"]}> Dúvidas</h4>
-          <span className={styles["open-icon"]}>+</span>
-        </div>
-        <div className={styles["list-items"]}>
-          {duvidasLinks.map((item, index) => (
-            <li key={index}>
-              <Link to={item.value}>{item.name}</Link>
-            </li>
-          ))}
+          <h4
+            className={
+              isActive.duvidas
+                ? `${styles["subtitle-text"]} duvidas ${styles["active"]}`
+                : `${styles["subtitle-text"]} duvidas`
+            }
+            onClick={handleClick}
+          >
+            Dúvidas
+          </h4>
+          <span
+            className={
+              isActive.duvidas
+                ? `${styles["open-icon"]} ${styles["active"]} duvidas`
+                : `${styles["open-icon"]} duvidas`
+            }
+            onClick={handleClick}
+          ></span>
         </div>
+        {isMobile ? (
+          isActive.duvidas && (
+            <List className={styles["list-items"]} itemsList={duvidasLinks} />
+          )
+        ) : (
+          <List className={styles["list-items"]} itemsList={duvidasLinks} />
+        )}
       </ul>
 
-      <ul className={styles["menu-list"]}>
+      <ul className={styles["submenu"]}>
         <div className={styles["subtitle"]}>
-          <h4 className={styles["subtitle-text"]}>Fale Conosco</h4>
-          <span className={styles["open-icon"]}>+</span>
-        </div>
-        <div className={styles["list-items"]}>
-          {rightInstitucionalLinks.map((item, index) => (
-            <li key={index}>
-              <p>{item.name}</p>
-              <Link to={item.value}>{item.phoneNumber}</Link>
-            </li>
-          ))}
+          <h4
+            className={
+              isActive.faleConosco
+                ? `${styles["subtitle-text"]} faleConosco ${styles["active"]}`
+                : `${styles["subtitle-text"]} faleConosco`
+            }
+            onClick={handleClick}
+          >
+            Fale Conosco
+          </h4>
+          <span
+            className={
+              isActive.faleConosco
+                ? `${styles["open-icon"]} ${styles["active"]} faleConosco`
+                : `${styles["open-icon"]} faleConosco`
+            }
+            onClick={handleClick}
+          ></span>
         </div>
+        {isMobile ? (
+          isActive.faleConosco && (
+            <List
+              className={styles["list-items"]}
+              itemsList={faleConoscoLinks}
+            />
+          )
+        ) : (
+          <List className={styles["list-items"]} itemsList={faleConoscoLinks} />
+        )}
       </ul>
-    </div>
+    </nav>
   );
 };