From 3c72d4a592327b0cb9e1b309629f0b9c38ff47dd Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Sun, 15 Jan 2023 22:42:35 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adi=C3=A7=C3=A3o=20do=20scss=20no=20foo?=
 =?UTF-8?q?ter=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer/BottomFooter.tsx        |  3 +
 src/components/Footer/ContactFooter.tsx       | 25 +++--
 src/components/Footer/FooterMain.modules.scss | 92 ++++++++++++++++++-
 src/components/Footer/MenuFolder.tsx          | 26 ------
 src/components/Footer/MenuListFooter.tsx      | 20 +++-
 src/components/Footer/MenuListMobile.tsx      | 81 ++++++++++++++++
 6 files changed, 210 insertions(+), 37 deletions(-)
 delete mode 100644 src/components/Footer/MenuFolder.tsx
 create mode 100644 src/components/Footer/MenuListMobile.tsx

diff --git a/src/components/Footer/BottomFooter.tsx b/src/components/Footer/BottomFooter.tsx
index b53f679..199a000 100644
--- a/src/components/Footer/BottomFooter.tsx
+++ b/src/components/Footer/BottomFooter.tsx
@@ -10,6 +10,8 @@ import Pagseguro from "../assets/imgs/SVGs/credit-cards/Pagseguro.svg";
 import Boleto from "../assets/imgs/SVGs/credit-cards/Boleto.svg";
 import vtex from "../assets/imgs/SVGs/credit-cards/vtex-pci-200.svg";
 
+import { WppIcon } from "./wpp";
+
 export const BottomFooter = () => {
   return (
     <>
@@ -20,6 +22,7 @@ export const BottomFooter = () => {
         </span>
 
         <div className="Payment_methods">
+          {window.innerWidth > 1024 ? "" : <WppIcon />}
           <img className="carts_icons" src={Master} alt="Master-icon" />
           <img className="carts_icons" src={Visa} alt="Visa-icon" />
           <img className="carts_icons" src={Diners} alt="Diners-icon" />
diff --git a/src/components/Footer/ContactFooter.tsx b/src/components/Footer/ContactFooter.tsx
index d16755b..c0398f1 100644
--- a/src/components/Footer/ContactFooter.tsx
+++ b/src/components/Footer/ContactFooter.tsx
@@ -1,4 +1,5 @@
 import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
+import { ListMobile1, ListMobile2, ListMobile3 } from "./MenuListMobile";
 
 export const Contact = () => {
   return (
@@ -11,18 +12,28 @@ export const Contact = () => {
               <MenuList1 />
             </>
           ) : (
-            ""
+            <ListMobile1 />
           )}
-          <h5> INSTITUCIONAL </h5>
-          <MenuList1 />
         </div>
         <div className="Menu_folder">
-          <h5> DÚVIDAS </h5>
-          <MenuList2 />
+          {window.innerWidth > 1024 ? (
+            <>
+              <h5> DÚVIDAS </h5>
+              <MenuList2 />
+            </>
+          ) : (
+            <ListMobile2 />
+          )}
         </div>
         <div className="Menu_folder">
-          <h5> FALE CONOSCO </h5>
-          <MenuList3 />
+          {window.innerWidth > 1024 ? (
+            <>
+              <h5> FALE CONOSCO </h5>
+              <MenuList3 />
+            </>
+          ) : (
+            <ListMobile3 />
+          )}
         </div>
       </div>
     </>
diff --git a/src/components/Footer/FooterMain.modules.scss b/src/components/Footer/FooterMain.modules.scss
index f74f925..b145b19 100644
--- a/src/components/Footer/FooterMain.modules.scss
+++ b/src/components/Footer/FooterMain.modules.scss
@@ -106,6 +106,12 @@
       display: flex;
       gap: 121px;
 
+      @media (max-width: 1024px) {
+        flex-direction: column;
+        gap: 12px;
+        padding-bottom: 12px;
+      }
+
       .Menu_folder {
         display: flex;
         flex-direction: column;
@@ -134,11 +140,83 @@
         .last {
           text-decoration-line: underline;
         }
+
+        .ButtonFooter_list {
+          text-align: left;
+          background: $color-white;
+          font-family: $fontFamily;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 14px;
+          text-transform: capitalize;
+          color: $color-gray-700;
+          border: none;
+        }
+
+        .ButtonFooterWrapper {
+          display: flex;
+          flex-direction: column;
+
+          .ButtonFooter_list {
+            position: relative;
+            padding: 0;
+            font-family: $fontFamily;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 16px;
+          }
+
+          .ButtonFooter_list:before,
+          .ButtonFooter_list:after {
+            content: "";
+            position: absolute;
+            background: $color-gray-700;
+          }
+
+          .ButtonFooter_list.false:before {
+            top: 50%;
+            right: 4px;
+            height: 2px;
+            width: 7.8px;
+            transform: rotate(90deg);
+          }
+
+          .ButtonFooter_list::after {
+            right: 4px;
+            top: 8px;
+            bottom: 4px;
+            height: 2px;
+            width: 8.28px;
+            transform: rotate(359deg);
+          }
+          .MenuLis_wrapper {
+            display: flex;
+            flex-direction: column;
+            margin-top: 12px;
+            gap: 12px;
+
+            @media (max-width: 1024px) {
+              padding-left: 8px;
+            }
+          }
+
+          .MenuLis_wrapper.false {
+            display: none;
+          }
+        }
       }
     }
   }
 
   .SocialMedia {
+    .Img_wrappers {
+      @media (max-width: 1024px) {
+        height: 35px;
+        padding-bottom: 12px;
+      }
+    }
     .Site {
       font-family: $fontFamily;
       font-style: normal;
@@ -188,9 +266,13 @@
       padding: 15px 100px;
     }
 
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      gap: 15px;
+    }
+
     .corporateName {
       display: flex;
-      align-self: center;
       width: 234px;
       height: 24px;
       font-family: $fontFamily;
@@ -199,6 +281,10 @@
       font-size: 10px;
       line-height: 12px;
       color: $color-white;
+
+      @media (min-width: 1025px) {
+        align-self: center;
+      }
     }
 
     .Payment_methods {
@@ -206,6 +292,10 @@
       display: flex;
       gap: 12px;
 
+      @media (max-width: 1024px) {
+        order: -1;
+      }
+
       .carts_icons {
         width: 36px;
         height: 20px;
diff --git a/src/components/Footer/MenuFolder.tsx b/src/components/Footer/MenuFolder.tsx
deleted file mode 100644
index 95ea799..0000000
--- a/src/components/Footer/MenuFolder.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
-
-// export const MenuFolder = () => {
-//   return (
-//     <>
-//       <div className="Menu_folder">
-//         <h5> INSTITUCIONAL </h5>
-//         <div>
-//           <MenuList1 />
-//         </div>
-//       </div>
-//       <div className="Menu_folder">
-//         <h5> DÚVIDAS </h5>
-//         <div>
-//           <MenuList2 />
-//         </div>
-//       </div>
-//       <div className="Menu_folder">
-//         <h5> FALE CONOSCO </h5>
-//         <div>
-//           <MenuList3 />
-//         </div>
-//       </div>
-//     </>
-//   );
-// };
diff --git a/src/components/Footer/MenuListFooter.tsx b/src/components/Footer/MenuListFooter.tsx
index 48e5a4a..fce84c7 100644
--- a/src/components/Footer/MenuListFooter.tsx
+++ b/src/components/Footer/MenuListFooter.tsx
@@ -1,6 +1,14 @@
 import { NavLink } from "react-router-dom";
 
-export const MenuList1 = () => {
+interface MenuFooterProps {
+  isOpenedFooter?: boolean;
+  setIsOpenedFooter?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const MenuList1 = ({
+  isOpenedFooter,
+  setIsOpenedFooter,
+}: MenuFooterProps) => {
   return (
     <>
       <NavLink className={"links_footer"} to={"/"}>
@@ -19,7 +27,10 @@ export const MenuList1 = () => {
   );
 };
 
-export const MenuList2 = () => {
+export const MenuList2 = ({
+  isOpenedFooter,
+  setIsOpenedFooter,
+}: MenuFooterProps) => {
   return (
     <>
       <NavLink className={"links_footer"} to={"/"}>
@@ -38,7 +49,10 @@ export const MenuList2 = () => {
   );
 };
 
-export const MenuList3 = () => {
+export const MenuList3 = ({
+  isOpenedFooter,
+  setIsOpenedFooter,
+}: MenuFooterProps) => {
   return (
     <>
       <NavLink className={"links_footer"} to={"/"}>
diff --git a/src/components/Footer/MenuListMobile.tsx b/src/components/Footer/MenuListMobile.tsx
new file mode 100644
index 0000000..4732da3
--- /dev/null
+++ b/src/components/Footer/MenuListMobile.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
+
+export const ListMobile1 = () => {
+  const [isOpenedFooter, setIsOpenedFooter] = useState(false);
+
+  const handlechange = () => {
+    setIsOpenedFooter((isOpenedFooter) => !isOpenedFooter);
+  };
+  return (
+    <>
+      <div className={`ButtonFooterWrapper  `}>
+        <button
+          className={`ButtonFooter_list ${isOpenedFooter && ""}`}
+          onClick={() => handlechange()}
+        >
+          Institucional
+        </button>
+        <div className={`MenuLis_wrapper ${isOpenedFooter && ""}`}>
+          <MenuList1
+            isOpenedFooter={isOpenedFooter}
+            setIsOpenedFooter={setIsOpenedFooter}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const ListMobile2 = () => {
+  const [isOpenedFooter, setIsOpenedFooter] = useState(false);
+
+  const handlechange = () => {
+    setIsOpenedFooter((isOpenedFooter) => !isOpenedFooter);
+  };
+
+  return (
+    <>
+      <div className={`ButtonFooterWrapper `}>
+        <button
+          className={`ButtonFooter_list ${isOpenedFooter && ""}`}
+          onClick={() => handlechange()}
+        >
+          Dúvidas
+        </button>
+        <div className={`MenuLis_wrapper ${isOpenedFooter && ""}`}>
+          <MenuList2
+            isOpenedFooter={isOpenedFooter}
+            setIsOpenedFooter={setIsOpenedFooter}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+export const ListMobile3 = () => {
+  const [isOpenedFooter, setIsOpenedFooter] = useState(false);
+
+  const handlechange = () => {
+    setIsOpenedFooter((isOpenedFooter) => !isOpenedFooter);
+  };
+
+  return (
+    <>
+      <div className={`ButtonFooterWrapper `}>
+        <button
+          className={`ButtonFooter_list ${isOpenedFooter && ""}`}
+          onClick={() => handlechange()}
+        >
+          Fale Conosco
+        </button>
+        <div className={`MenuLis_wrapper ${isOpenedFooter && ""}`}>
+          <MenuList3
+            isOpenedFooter={isOpenedFooter}
+            setIsOpenedFooter={setIsOpenedFooter}
+          />
+        </div>
+      </div>
+    </>
+  );
+};