From 95c1334239d02240778f243ff1fa0326d4582687 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:19:59 -0300 Subject: [PATCH] feat: adiciona accordion mobile e organiza pasta do menu hamburguer --- .../Footer/Accordion/Accordion.scss | 107 ++++++++++++++++++ .../components/Footer/Accordion/Accordion.tsx | 103 +++++++++++++++++ .../Footer/Accordion/AccordionData.js | 25 ++++ .../src/components/Footer/Footer.tsx | 2 + .../src/components/Header/Header.tsx | 2 +- .../MenuHamburguer/MenuHamb.module.scss | 2 +- .../{ => Header}/MenuHamburguer/MenuHamb.tsx | 8 +- 7 files changed, 243 insertions(+), 6 deletions(-) create mode 100644 desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss create mode 100644 desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx create mode 100644 desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js rename desafio-react-e-typescript/src/components/{ => Header}/MenuHamburguer/MenuHamb.module.scss (97%) rename desafio-react-e-typescript/src/components/{ => Header}/MenuHamburguer/MenuHamb.tsx (90%) diff --git a/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss new file mode 100644 index 0000000..090a4a8 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss @@ -0,0 +1,107 @@ +.wrapper-container { + border-top: 1px solid black; + padding: 24px 16px; + min-height: 198px; + + @media screen and (min-width: 1025px) { + display: none; + } + + .wrapper { + display: flex; + align-items: center; + height: auto; + + .accordion { + width: 100%; + + .item { + margin-bottom: 12px; + + .title { + color: #303030; + display: flex; + justify-content: space-between; + align-items: center; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-style: normal; + font-size: 14px; + + h3 { + margin: 0; + } + + span { + font-size: 14px; + } + } + } + + .content { + max-height: 0; + overflow: hidden; + transition: all 0.2s cubic-bezier(0, 1, 0, 1); + + ul { + padding: unset; + list-style-type: none; + + li { + margin: 12px 0px; + + a { + font-family: "Roboto", sans-serif; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + text-decoration: none; + } + } + } + + .institucional-content { + margin: 0; + } + + .revendedor-content, + .duvidasfreq-content, + .num2-content { + text-decoration: underline; + } + + .atendimento-content, + .atendimento2-content { + font-weight: 500; + } + } + + .content.show { + height: auto; + max-height: 9999px; + transition: all 0.5s cubic-bezier(1, 0, 1, 0); + } + } + } + + .footer-socials-container { + button { + margin-right: 10px; + background-color: transparent; + } + + h4 { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: lowercase; + margin-top: 12px; + } + + @media screen and (min-width: 1025px) { + display: none; + } + } +} diff --git a/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx new file mode 100644 index 0000000..36454e2 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx @@ -0,0 +1,103 @@ +import React, { useState } from "react"; + +import facebook from "../../../assets/images/facebookicon.svg"; +import instagram from "../../../assets/images/instagramicon.svg"; +import twitter from "../../../assets/images/twittericon.svg"; +import youtube from "../../../assets/images/youtubeicon.svg"; +import linkedin from "../../../assets/images/linkedinicon.svg"; + +import "./Accordion.scss"; +import { data } from "./AccordionData"; + +const Accordion = () => { + const [selected, setSelected] = useState(false); + + const toggle = (i: any) => { + if (selected === i) { + return setSelected(false); + } + + setSelected(i); + }; + + return ( +
+
+
+ {data.map((item: any, i: any) => ( +
+
toggle(i)}> +

{item.title}

+ {selected === i ? "-" : "+"} +
+ +
+ ))} +
+
+
+ + + + + +

www.loremipsum.com

+
+
+ ); +}; + +export { Accordion }; diff --git a/desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js b/desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js new file mode 100644 index 0000000..487344e --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js @@ -0,0 +1,25 @@ +const data = [ + { + title: "Institucional", + subtitle: ["Quem somos"], + subtitle2: ["Política de Privacidade"], + subtitle3: ["Segurança"], + subtitle4: ["Seja um Revendedor"], + }, + { + title: "Dúvidas", + subtitle12: ["Entrega"], + subtitle22: ["Pagamento"], + subtitle32: ["Trocas e Devoluções"], + subtitle42: ["Dúvidas Frequentes"], + }, + { + title: "Fale Conosco", + subtitle13: ["Atendimento Ao Consumidor"], + subtitle23: ["(11) 4159-9504"], + subtitle33: ["Atendimento Online"], + subtitle43: ["(11) 99433-8825"], + }, +]; + +export { data }; diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index 3978fbf..982546d 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Newsletter } from "../Newsletter/Newsletter"; +import { Accordion } from "../Footer/Accordion/Accordion"; import styles from "./Footer.module.scss"; @@ -16,6 +17,7 @@ const Footer = () => { return (
+

Institucional

diff --git a/desafio-react-e-typescript/src/components/Header/Header.tsx b/desafio-react-e-typescript/src/components/Header/Header.tsx index 0044323..375be2a 100644 --- a/desafio-react-e-typescript/src/components/Header/Header.tsx +++ b/desafio-react-e-typescript/src/components/Header/Header.tsx @@ -2,7 +2,7 @@ import React from "react"; import logo from "../../assets/images/Logo-M3Academy 1.svg"; import cart from "../../assets/images/carticon.svg"; -import { MenuHamb } from "../MenuHamburguer/MenuHamb"; +import { MenuHamb } from "./MenuHamburguer/MenuHamb"; import styles from "./Header.module.scss"; diff --git a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.module.scss b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.module.scss similarity index 97% rename from desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.module.scss rename to desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.module.scss index 89b0825..1603b6f 100644 --- a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.module.scss +++ b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.module.scss @@ -65,7 +65,7 @@ height: 18px; right: 16px; background-color: transparent; - background-image: url(../../assets/images/searchicon.svg); + background-image: url(../../../assets/images/searchicon.svg); background-repeat: no-repeat; margin: 9px 16px 9px 16px; cursor: pointer; diff --git a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.tsx b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.tsx similarity index 90% rename from desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.tsx rename to desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.tsx index 9b047b4..f8e3acf 100644 --- a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.tsx +++ b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.tsx @@ -1,8 +1,8 @@ import React, { useState } from "react"; -import menuhambicon from "../../assets/images/menuhambicon.svg"; -import logo from "../../assets/images/Logo-M3Academy 1.svg"; -import cart from "../../assets/images/carticon.svg"; -import close from "../../assets/images/closeicon.svg"; +import menuhambicon from "../../../assets/images/menuhambicon.svg"; +import logo from "../../../assets/images/Logo-M3Academy 1.svg"; +import cart from "../../../assets/images/carticon.svg"; +import close from "../../../assets/images/closeicon.svg"; import styles from "./MenuHamb.module.scss";