forked from M3-Academy/desafio-react-e-typescript
feat(home): ajustando footer top mobile, adicionando funcionalidade de ul fechadas e abrindo com click
This commit is contained in:
parent
d659c072d3
commit
594211063c
@ -32,6 +32,8 @@
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@ -49,7 +51,35 @@
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&::after {
|
||||
content: '+';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $color-black-500;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.opened {
|
||||
&::after {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
|
||||
&.opened ~ .footer__top__block__item-list{
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import styles from './FooterTop.module.scss'
|
||||
import { useState } from 'react';
|
||||
|
||||
import './FooterTop.scss'
|
||||
|
||||
import facebook from '../../../assets/imgs/logo-facebook.png';
|
||||
import instagram from '../../../assets/imgs/logo-instagram.png';
|
||||
@ -7,118 +9,140 @@ import youtube from '../../../assets/imgs/logo-youtube.png';
|
||||
import linkedin from '../../../assets/imgs/logo-linkedin.png';
|
||||
|
||||
const FooterTop = () => {
|
||||
return (
|
||||
<section className={styles['footer__top']}>
|
||||
<div className={styles['footer__top__wrapper']}>
|
||||
<div className={styles['footer__top__block']}>
|
||||
<h4 className={styles['footer__top__block__title']}> INSTITUCIONAL </h4>
|
||||
|
||||
<ul className={styles['footer__top__block__item-list']}>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
const [ulIsVisible, setUlIsVisible] = useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
const titles = document.querySelectorAll('.footer__top__block__title');
|
||||
|
||||
for (let index = 0; index < titles.length; index++) {
|
||||
const element = titles[index];
|
||||
|
||||
element.addEventListener('click', () => {
|
||||
if (ulIsVisible) {
|
||||
setUlIsVisible(false)
|
||||
element.classList.remove('opened');
|
||||
} else {
|
||||
setUlIsVisible(true)
|
||||
element.classList.add('opened')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={'footer__top'}>
|
||||
<div className={'footer__top__wrapper'}>
|
||||
<div className={'footer__top__block'}>
|
||||
<h4 className={`footer__top__block__title`} onClick={handleClick}> INSTITUCIONAL </h4>
|
||||
|
||||
<ul className={'footer__top__block__item-list'}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Quem Somos
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Política de Privacidade
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Segurança
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Seja um Revendedor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles['footer__top__block']}>
|
||||
<h4 className={styles['footer__top__block__title']}> DÚVIDAS </h4>
|
||||
<div className={'footer__top__block'}>
|
||||
<h4 className={`footer__top__block__title`} onClick={handleClick}> DÚVIDAS </h4>
|
||||
|
||||
<ul className={styles['footer__top__block__item-list']}>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<ul className={'footer__top__block__item-list'}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Entrega
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Pagamento
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Trocas e Devoluções
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
Dúvidas Frequentes
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles['footer__top__block']}>
|
||||
<h4 className={styles['footer__top__block__title']}> Fale Conosco </h4>
|
||||
<div className={'footer__top__block'}>
|
||||
<h4 className={`footer__top__block__title`} onClick={handleClick}> Fale Conosco </h4>
|
||||
|
||||
<ul className={styles['footer__top__block__item-list']}>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<ul className={'footer__top__block__item-list'}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
<strong>Atendimento Ao <br/> Consumidor</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
(11) 4159 9504
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
<strong>Atendimento Online</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
<li className={'footer__top__block__item'}>
|
||||
<a href="/" className={'footer__top__block__link'}>
|
||||
(11) 99433-8825
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles['footer__top__block-social']}>
|
||||
<ul className={styles['footer__top__block-social__social-medias']}>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<div className={'footer__top__block-social'}>
|
||||
<ul className={'footer__top__block-social__social-medias'}>
|
||||
<li className={'footer__top__block-social__social-medias__logo'}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={facebook} alt="Logo Facebook" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<li className={'footer__top__block-social__social-medias__logo'}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={instagram} alt="Logo instagram" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<li className={'footer__top__block-social__social-medias__logo'}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={twitter} alt="Logo twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<li className={'footer__top__block-social__social-medias__logo'}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={youtube} alt="Logo youtube" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<li className={'footer__top__block-social__social-medias__logo'}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={linkedin} alt="Logo linkedin" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span className={styles['footer__top__block-social__social-medias__site']}>www.loremipsum.com</span>
|
||||
<span className={'footer__top__block-social__social-medias__site'}>www.loremipsum.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user