forked from M3-Academy/desafio-react-e-typescript
feat(footer): Estiliza e aplica funcionalidade ao menu do footer top para mobile e faz uma pequena adaptação para desktop
This commit is contained in:
parent
6fcc8dd730
commit
e374460038
@ -8,14 +8,30 @@
|
||||
gap: 293px;
|
||||
}
|
||||
|
||||
&__items {
|
||||
@media ((min-width: 1025px) and (max-width: 1170px)) {
|
||||
gap: 75px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
&__top {
|
||||
|
||||
&__title,
|
||||
&__item,
|
||||
&__item-title {
|
||||
color: variables.$black-300;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__title-wrapper {
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
@ -23,26 +39,73 @@
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: contrast(60%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&__plus-sign {
|
||||
font-weight: 500;
|
||||
color: variables.$black-300;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: contrast(60%);
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
@media (max-width: 1024px) {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
padding-bottom: 12px;
|
||||
transition: .3s ease;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&__items-inactive {
|
||||
@media (max-width: 1024px) {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
}
|
||||
|
||||
&__item,
|
||||
&__item-title {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
&:hover {
|
||||
filter:contrast(60%);
|
||||
}
|
||||
}
|
||||
|
||||
&__item-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import {useState} from "react";
|
||||
|
||||
import styles from "./FooterMenu.module.scss";
|
||||
|
||||
@ -6,73 +6,107 @@ import { ItemList } from "../ItemList/ItemList";
|
||||
|
||||
const FooterMenu = () => {
|
||||
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const [isActive2, setIsActive2] = useState(false);
|
||||
const [isActive3, setIsActive3] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={styles["footer-menu"]}>
|
||||
|
||||
<div className={styles["footer-menu__items"]}>
|
||||
<h3 className={styles["footer-menu__items__title"]}>
|
||||
INSTITUCIONAL
|
||||
</h3>
|
||||
<div className={styles["footer-menu__top"]}>
|
||||
|
||||
<ul>
|
||||
<div className={styles["footer-menu__top__title-wrapper"]} onClick={() => setIsActive(!isActive)}>
|
||||
<h3 className={styles["footer-menu__top__title"]}>
|
||||
INSTITUCIONAL
|
||||
</h3>
|
||||
|
||||
<div className={styles["footer-menu__top__plus-sign"]}>
|
||||
{isActive ? "-" : "+"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className={isActive === true
|
||||
? styles["footer-menu__top__items"]
|
||||
: styles["footer-menu__top__items-inactive"]}>
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="Quem Somos" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Quem Somos" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="Política de Privacidade" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Política de Privacidade" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="Segurança" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Segurança" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="Seja um Revendedor" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Seja um Revendedor" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-menu__items"]}>
|
||||
<h3 className={styles["footer-menu__items__title"]}>
|
||||
DÚVIDAS
|
||||
</h3>
|
||||
<div className={styles["footer-menu__top"]}>
|
||||
|
||||
<div className={styles["footer-menu__top__title-wrapper"]} onClick={() => setIsActive2(!isActive2)}>
|
||||
<h3 className={styles["footer-menu__top__title"]}>
|
||||
DÚVIDAS
|
||||
</h3>
|
||||
|
||||
<div className={styles["footer-menu__top__plus-sign"]}>
|
||||
{isActive2 ? "-" : "+"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className={isActive2 === true
|
||||
? styles["footer-menu__top__items"]
|
||||
: styles["footer-menu__top__items-inactive"]}>
|
||||
|
||||
<ul>
|
||||
<a href="/">
|
||||
<ItemList text="Entrega" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Entrega" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="Pagamento" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Pagamento" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="Trocas e Devoluções" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Trocas e Devoluções" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="Dúvidas Frequentes" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="Dúvidas Frequentes" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-menu__items"]}>
|
||||
<h3 className={styles["footer-menu__items__title"]}>
|
||||
FALE CONOSCO
|
||||
</h3>
|
||||
<div className={styles["footer-menu__top"]}>
|
||||
|
||||
<ul>
|
||||
<ItemList text="Atendimento ao Consumidor" textClassName={styles["footer-menu__items__item-title"]} />
|
||||
<div className={styles["footer-menu__top__title-wrapper"]} onClick={() => setIsActive3(!isActive3)}>
|
||||
<h3 className={styles["footer-menu__top__title"]}>
|
||||
FALE CONOSCO
|
||||
</h3>
|
||||
|
||||
<div className={styles["footer-menu__top__plus-sign"]}>
|
||||
{isActive3 ? "-" : "+"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className={isActive3 === true
|
||||
? styles["footer-menu__top__items"]
|
||||
: styles["footer-menu__top__items-inactive"]}>
|
||||
|
||||
<ItemList text="Atendimento ao Consumidor" textClassName={styles["footer-menu__top__item-title"]} />
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="(11) 4159-9504" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="(11) 4159-9504" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
|
||||
<ItemList text="Atendimento Online" textClassName={styles["footer-menu__items__item-title"]} />
|
||||
<ItemList text="Atendimento Online" textClassName={styles["footer-menu__top__item-title"]} />
|
||||
|
||||
<a href="/">
|
||||
<ItemList text="(11) 99433-8825" textClassName={styles["footer-menu__items__item"]} />
|
||||
<ItemList text="(11) 99433-8825" textClassName={styles["footer-menu__top__item"]} />
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -5,4 +5,11 @@
|
||||
justify-content: space-between;
|
||||
margin: 50px 0;
|
||||
padding: 0 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin: 24px 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user