forked from M3-Academy/desafio-react-e-typescript
feat(footer): cria menu accordion nos links do footer mobile
This commit is contained in:
parent
977851d4fc
commit
3aa9e8c9b8
@ -15,7 +15,7 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
.submenu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@ -25,9 +25,6 @@
|
||||
gap: 12px;
|
||||
|
||||
.subtitle {
|
||||
// background: yellow;
|
||||
// display: flex;
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -49,11 +46,43 @@
|
||||
}
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
text-transform:none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// &.active {
|
||||
// }
|
||||
}
|
||||
|
||||
.open-icon {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #000000;
|
||||
width: 7.8px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
background: #000000;
|
||||
width: 1px;
|
||||
height: 8.28px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width > 1024px) {
|
||||
display: none;
|
||||
}
|
||||
@ -64,14 +93,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
@media screen and (width <= 1024px) {
|
||||
display: none;
|
||||
}
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
// transition: all 0.2s ease-in-out; hover? active?
|
||||
// background-color: red;
|
||||
|
||||
a {
|
||||
font-family: "Roboto";
|
||||
|
@ -1,9 +1,10 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import React, { useState, useContext } from "react";
|
||||
import { WidthContext } from "../../../contexts/WidthContext";
|
||||
import { List } from "../../List/List";
|
||||
|
||||
import styles from "./SiteMap.module.scss";
|
||||
|
||||
const leftInstitucionalLinks = [
|
||||
const institucionalLinks = [
|
||||
{
|
||||
name: "Quem Somos",
|
||||
value: "sobre",
|
||||
@ -41,7 +42,7 @@ const duvidasLinks = [
|
||||
},
|
||||
];
|
||||
|
||||
const rightInstitucionalLinks = [
|
||||
const faleConoscoLinks = [
|
||||
{
|
||||
name: "Atendimento ao Consumidor",
|
||||
phoneNumber: "(11) 4159 9504",
|
||||
@ -55,51 +56,136 @@ const rightInstitucionalLinks = [
|
||||
];
|
||||
|
||||
const SiteMap = () => {
|
||||
const { isMobile } = useContext(WidthContext);
|
||||
|
||||
const [isActive, setIsActive] = useState({
|
||||
institucional: false,
|
||||
duvidas: false,
|
||||
faleConosco: false,
|
||||
});
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLHeadingElement, MouseEvent>) => {
|
||||
const element = e.target as HTMLElement;
|
||||
|
||||
if (element.classList.contains("institucional")) {
|
||||
setIsActive((prevState) => ({
|
||||
...prevState,
|
||||
institucional: !isActive.institucional,
|
||||
}));
|
||||
} else if (element.classList.contains("duvidas")) {
|
||||
setIsActive((prevState) => ({
|
||||
...prevState,
|
||||
duvidas: !isActive.duvidas,
|
||||
}));
|
||||
} else if (element.classList.contains("faleConosco")) {
|
||||
setIsActive((prevState) => ({
|
||||
...prevState,
|
||||
faleConosco: !isActive.faleConosco,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["container"]}>
|
||||
<ul className={styles["menu-list"]}>
|
||||
<nav className={styles["container"]}>
|
||||
<ul className={styles["submenu"]}>
|
||||
<div className={styles["subtitle"]}>
|
||||
<h4 className={styles["subtitle-text"]}>Institucional</h4>
|
||||
<span className={styles["open-icon"]}>+</span>
|
||||
</div>
|
||||
<div className={styles["list-items"]}>
|
||||
{leftInstitucionalLinks.map((item, index) => (
|
||||
<li key={index}>
|
||||
<Link to={item.value}>{item.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
<h4
|
||||
className={
|
||||
isActive.institucional
|
||||
? `${styles["subtitle-text"]} ${styles["active"]} institucional`
|
||||
: `${styles["subtitle-text"]} institucional`
|
||||
}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Institucional
|
||||
</h4>
|
||||
<span
|
||||
className={
|
||||
isActive.institucional
|
||||
? `${styles["open-icon"]} ${styles["active"]} institucional`
|
||||
: `${styles["open-icon"]} institucional`
|
||||
}
|
||||
onClick={handleClick}
|
||||
></span>
|
||||
</div>
|
||||
{isMobile ? (
|
||||
isActive.institucional && (
|
||||
<List
|
||||
className={styles["list-items"]}
|
||||
itemsList={institucionalLinks}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<List
|
||||
className={styles["list-items"]}
|
||||
itemsList={institucionalLinks}
|
||||
/>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
<ul className={styles["menu-list"]}>
|
||||
<ul className={styles["submenu"]}>
|
||||
<div className={styles["subtitle"]}>
|
||||
<h4 className={styles["subtitle-text"]}> Dúvidas</h4>
|
||||
<span className={styles["open-icon"]}>+</span>
|
||||
</div>
|
||||
<div className={styles["list-items"]}>
|
||||
{duvidasLinks.map((item, index) => (
|
||||
<li key={index}>
|
||||
<Link to={item.value}>{item.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
<h4
|
||||
className={
|
||||
isActive.duvidas
|
||||
? `${styles["subtitle-text"]} duvidas ${styles["active"]}`
|
||||
: `${styles["subtitle-text"]} duvidas`
|
||||
}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Dúvidas
|
||||
</h4>
|
||||
<span
|
||||
className={
|
||||
isActive.duvidas
|
||||
? `${styles["open-icon"]} ${styles["active"]} duvidas`
|
||||
: `${styles["open-icon"]} duvidas`
|
||||
}
|
||||
onClick={handleClick}
|
||||
></span>
|
||||
</div>
|
||||
{isMobile ? (
|
||||
isActive.duvidas && (
|
||||
<List className={styles["list-items"]} itemsList={duvidasLinks} />
|
||||
)
|
||||
) : (
|
||||
<List className={styles["list-items"]} itemsList={duvidasLinks} />
|
||||
)}
|
||||
</ul>
|
||||
|
||||
<ul className={styles["menu-list"]}>
|
||||
<ul className={styles["submenu"]}>
|
||||
<div className={styles["subtitle"]}>
|
||||
<h4 className={styles["subtitle-text"]}>Fale Conosco</h4>
|
||||
<span className={styles["open-icon"]}>+</span>
|
||||
</div>
|
||||
<div className={styles["list-items"]}>
|
||||
{rightInstitucionalLinks.map((item, index) => (
|
||||
<li key={index}>
|
||||
<p>{item.name}</p>
|
||||
<Link to={item.value}>{item.phoneNumber}</Link>
|
||||
</li>
|
||||
))}
|
||||
<h4
|
||||
className={
|
||||
isActive.faleConosco
|
||||
? `${styles["subtitle-text"]} faleConosco ${styles["active"]}`
|
||||
: `${styles["subtitle-text"]} faleConosco`
|
||||
}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Fale Conosco
|
||||
</h4>
|
||||
<span
|
||||
className={
|
||||
isActive.faleConosco
|
||||
? `${styles["open-icon"]} ${styles["active"]} faleConosco`
|
||||
: `${styles["open-icon"]} faleConosco`
|
||||
}
|
||||
onClick={handleClick}
|
||||
></span>
|
||||
</div>
|
||||
{isMobile ? (
|
||||
isActive.faleConosco && (
|
||||
<List
|
||||
className={styles["list-items"]}
|
||||
itemsList={faleConoscoLinks}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<List className={styles["list-items"]} itemsList={faleConoscoLinks} />
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user