feat: adiciona accordion mobile e organiza pasta do menu hamburguer
This commit is contained in:
parent
6789e7c39c
commit
95c1334239
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<div className="wrapper-container">
|
||||
<div className="wrapper">
|
||||
<div className="accordion">
|
||||
{data.map((item: any, i: any) => (
|
||||
<div className="item" key={item.id}>
|
||||
<div className="title" onClick={() => toggle(i)}>
|
||||
<h3>{item.title}</h3>
|
||||
<span>{selected === i ? "-" : "+"}</span>
|
||||
</div>
|
||||
<div className={selected === i ? "content show" : "content"}>
|
||||
<ul className="institucional-content">
|
||||
<li className="quem-somos-content">
|
||||
<a href="/">{item.subtitle}</a>
|
||||
</li>
|
||||
<li className="politica-content">
|
||||
<a href="/">{item.subtitle2}</a>
|
||||
</li>
|
||||
<li className="segurança-content">
|
||||
<a href="/">{item.subtitle3}</a>
|
||||
</li>
|
||||
<li className="revendedor-content">
|
||||
<a href="/">{item.subtitle4}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="duvidas-content">
|
||||
<li className="">
|
||||
<a href="/">{item.subtitle12}</a>
|
||||
</li>
|
||||
<li className="">
|
||||
<a href="/">{item.subtitle22}</a>
|
||||
</li>
|
||||
<li className="">
|
||||
<a href="/">{item.subtitle32}</a>
|
||||
</li>
|
||||
<li className="duvidasfreq-content">
|
||||
<a href="/">{item.subtitle42}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="fale-conosco-content">
|
||||
<li className="atendimento-content">
|
||||
<a href="/">{item.subtitle13}</a>
|
||||
</li>
|
||||
<li className="num1-content">
|
||||
<a href="/">{item.subtitle23}</a>
|
||||
</li>
|
||||
<li className="atendimento2-content">
|
||||
<a href="/">{item.subtitle33}</a>
|
||||
</li>
|
||||
<li className="num2-content">
|
||||
<a href="/">{item.subtitle43}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-socials-container">
|
||||
<button className="button-icon">
|
||||
<img src={facebook} alt="facebookicon" className="facebook-icon" />
|
||||
</button>
|
||||
<button className="button-icon">
|
||||
<img src={instagram} alt="instagramicon" className="instagram-icon" />
|
||||
</button>
|
||||
<button className="button-icon">
|
||||
<img src={twitter} alt="twittericon" className="twitter-icon" />
|
||||
</button>
|
||||
<button className="button-icon">
|
||||
<img src={youtube} alt="youtubeicon" className="youtube-icon" />
|
||||
</button>
|
||||
<button className="button-icon">
|
||||
<img src={linkedin} alt="linkedinicon" className="linkedin-icon" />
|
||||
</button>
|
||||
<h4 className="footer-socials-site">www.loremipsum.com</h4>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Accordion };
|
||||
@ -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 };
|
||||
@ -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 (
|
||||
<div>
|
||||
<Newsletter />
|
||||
<Accordion />
|
||||
<div className={styles["footer-container-top"]}>
|
||||
<div className={styles["footer-container-institucional"]}>
|
||||
<h3 className={styles["footer-institucional"]}>Institucional</h3>
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user