forked from M3-Academy/desafio-react-e-typescript
feat : menuFooter finalidado com accordin
This commit is contained in:
parent
b627229b2f
commit
38d9663667
26
adilson-fernando/package-lock.json
generated
26
adilson-fernando/package-lock.json
generated
@ -15,12 +15,14 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"accordion": "^3.0.2",
|
||||
"cpf": "^2.0.1",
|
||||
"date-fns": "^2.28.0",
|
||||
"formik": "^2.2.9",
|
||||
"module-name": "^0.0.1-security",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
@ -4376,6 +4378,11 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/accordion": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/accordion/-/accordion-3.0.2.tgz",
|
||||
"integrity": "sha512-jbQfFaw+57OBwPt7qSNHuW+RA8smmRwkWRS1Ozh6K/QxUspBgBV/LpdSzlY7vee8TomS6j3D33B9rIeH1qMwsA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.8.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
|
||||
@ -14297,6 +14304,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
||||
},
|
||||
"node_modules/react-headless-accordion": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
|
||||
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -20410,6 +20425,11 @@
|
||||
"negotiator": "0.6.3"
|
||||
}
|
||||
},
|
||||
"accordion": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/accordion/-/accordion-3.0.2.tgz",
|
||||
"integrity": "sha512-jbQfFaw+57OBwPt7qSNHuW+RA8smmRwkWRS1Ozh6K/QxUspBgBV/LpdSzlY7vee8TomS6j3D33B9rIeH1qMwsA=="
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.8.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
|
||||
@ -27426,6 +27446,12 @@
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
||||
},
|
||||
"react-headless-accordion": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
|
||||
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
|
||||
@ -10,12 +10,14 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"accordion": "^3.0.2",
|
||||
"cpf": "^2.0.1",
|
||||
"date-fns": "^2.28.0",
|
||||
"formik": "^2.2.9",
|
||||
"module-name": "^0.0.1-security",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import {Accordion, AccordionBody, AccordionHeader, AccordionItem} from "react-headless-accordion";
|
||||
|
||||
import "../../styles/Global.scss";
|
||||
import "../../styles/Variaveis.scss";
|
||||
@ -18,20 +19,81 @@ const MenuFooter = () => {
|
||||
<div className={styles["menuFooter"]}>
|
||||
|
||||
<div className={styles["menuFooter-mobile"]}>
|
||||
<div>
|
||||
<button>Institucional</button>
|
||||
<img src={abrirMenu} alt="abrir Menu" />
|
||||
</div>
|
||||
<div>
|
||||
<button>Dúvidas</button>
|
||||
<img src={abrirMenu} alt="abrir Menu" />
|
||||
</div>
|
||||
<div>
|
||||
<button>Fale Conosco</button>
|
||||
<img src={abrirMenu} alt="abrir Menu" />
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem>
|
||||
<AccordionHeader className={styles["accordion-button"]}>
|
||||
<h1 className={styles[`accordion-title`]}>Institucional</h1>
|
||||
<img className={styles[`accordion-img`]} src={abrirMenu} alt="Abrir menu" />
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody className={styles["accordion-aberto"]}>
|
||||
<div className="accordion-body">
|
||||
<h2 className={styles["text-h2"]} >Quem Somos</h2>
|
||||
<h2 className={styles["text-h2"]} >Política de Privacidade</h2>
|
||||
<h2 className={styles["text-h2"]} >Segurança</h2>
|
||||
<a className={styles["text-link"]} href="/">Seja um Revendedor</a>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<AccordionHeader className={styles["accordion-button"]}>
|
||||
<h1 className={styles[`accordion-title`]}>Dúvidas</h1>
|
||||
<img className={styles[`accordion-img`]} src={abrirMenu} alt="Abrir menu" />
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody className={styles["accordion-aberto"]}>
|
||||
<div className="accordion-body">
|
||||
<h2 className={styles["text-h2"]} >Entrega</h2>
|
||||
<h2 className={styles["text-h2"]} >Pagamento</h2>
|
||||
<h2 className={styles["text-h2"]} >Trocas e Devoluções</h2>
|
||||
<a className={styles["text-link"]} href="/">Dúvidas Frequentes</a>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<AccordionHeader className={styles["accordion-button"]}>
|
||||
<h1 className={styles[`accordion-title`]}>Fale Conosco</h1>
|
||||
<img className={styles[`accordion-img`]} src={abrirMenu} alt="Abrir menu" />
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody className={styles["accordion-aberto"]}>
|
||||
<div className="accordion-body">
|
||||
<h2 className={styles["text-negrito"]} >Atendimento Ao Consumidor</h2>
|
||||
<h2 className={styles["text-h2"]} >(11)4159 9504</h2>
|
||||
<h2 className={styles["text-negrito"]} >Atendimento Online</h2>
|
||||
<a className={styles["text-link"]} href="/">(11) 99433-8825</a>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<div>
|
||||
<div className={styles["conteiner-icons"]} >
|
||||
|
||||
<a href="/">
|
||||
<img className={styles["icons"]} src={facebook} alt="facebook" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img className={styles["icons"]} src={insta} alt="instagran" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img className={styles["icons"]} src={twitter} alt="twitter" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img className={styles["icons"]} src={youtube} alt="youtube" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img className={styles["icons"]} src={linkedin} alt="linkedin" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles["menuFooter-desktop"]}>
|
||||
|
||||
<div className={styles["desktop-institucional"]}>
|
||||
@ -83,9 +145,9 @@ const MenuFooter = () => {
|
||||
<img className={styles["icons"]} src={linkedin} alt="linkedin" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className={styles["h2-icons"]} >www.loremipsum.com</h2>
|
||||
<h2 className={styles["h2-icons"]} >www.loremipsum.com</h2>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -4,6 +4,69 @@
|
||||
display: none;
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.accordion-button{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
margin-bottom:12px ;
|
||||
.accordion-title{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
|
||||
}
|
||||
.accordion-img{
|
||||
width:7.8px ;
|
||||
height: 8.28px;
|
||||
right: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.conteiner-icons{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.icons{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
.accordion-aberto{
|
||||
margin-bottom:12px ;
|
||||
.text-h2{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.text-negrito{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.text-link{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration-line: underline;
|
||||
color: #303030;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menuFooter-desktop{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user