anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(header): resolvendo problema com scroll quando menu tá aberto

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-06 16:43:54 -03:00
parent 9a0b1ad665
commit ec26c633bf
2 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Header/Header.tsx
View File

@ -1,22 +1,52 @@
import { HeaderContentTop } from "./HeaderContentTop";
import styles from "./Header.module.scss"
import styles from "./Header.module.scss";
import { HeaderContentBottom } from "./HeaderContentBottom";
import {useState} from "react";
import { useState, useEffect } from "react";
import Icon__Menu from "../../assets/imgs/IconMenu.svg";
const Header = () => {
const [menuIsVisible, setMenuIsVisible] = useState(false);
const [menuIsVisible, setMenuIsVisible]= useState(false);
const resizeWindow = () => {
window.addEventListener("resize", () => {
if (window.innerWidth > 1024) {
document.body.style.overflowY = "auto";
}
if (window.innerWidth <= 1024 && menuIsVisible) {
document.body.style.overflowY = "hidden";
} else {
document.body.style.overflowY = "auto";
}
});
};
useEffect(() => {
resizeWindow();
});
return (
<header>
<ul className={styles["Header__Top"]}>
<button className={styles["Header__Button"]} onClick={() => setMenuIsVisible(true)} aria-label="abrir menu">
<img src={Icon__Menu} alt="ícone de menu" className={styles["Icon__Menu"]} />
</button>
<HeaderContentTop menuIsVisible={menuIsVisible} setMenuIsVisible={setMenuIsVisible}/>
</ul>
<HeaderContentBottom menuIsVisible={menuIsVisible} setMenuIsVisible={setMenuIsVisible}/>
<button
className={styles["Header__Button"]}
onClick={() => setMenuIsVisible(true)}
aria-label="abrir menu"
>
<img
src={Icon__Menu}
alt="ícone de menu"
className={styles["Icon__Menu"]}
/>
</button>
<HeaderContentTop
menuIsVisible={menuIsVisible}
setMenuIsVisible={setMenuIsVisible}
/>
</ul>
<HeaderContentBottom
menuIsVisible={menuIsVisible}
setMenuIsVisible={setMenuIsVisible}
/>
</header>
);
};

12
src/components/Header/HeaderContentBottom.tsx
View File

@ -1,5 +1,5 @@
import styles from "./Header.module.scss"
import React from "react";
import React, { useEffect } from "react";
interface HeaderContentProps {
menuIsVisible: boolean;
@ -7,6 +7,16 @@ interface HeaderContentProps {
}
const HeaderContentBottom = ({menuIsVisible,setMenuIsVisible}: HeaderContentProps) => {
useEffect(() => {
if (window.innerWidth <= 1024){
document.body.style.overflowY = menuIsVisible ? 'hidden' : 'auto';
}
if (window.innerWidth > 1024){
document.body.style.overflowY = 'auto';
}
}, [menuIsVisible]);
return (
<>
<div className={