BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(home): resolvendo problema na abertura do menu que estava deixando scrollar a page

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-11 17:13:29 -03:00
parent 9010e5f2c1
commit 85b92a43c4
2 changed files with 72 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/Header/HeaderMobile/HeaderMobile.tsx
View File

@ -1,38 +1,52 @@
import { useState } from 'react';
import { useEffect, useState } from "react";
import styles from './HeaderMobile.module.scss'
import styles from "./HeaderMobile.module.scss";
import { MenuMobile } from '../../MenuMobile/MenuMobile';
import hamburger from '../../../assets/imgs/menu-hamburger-header.png'
import logo from '../../../assets/imgs/m3-acdemy-logo.png'
import cart from '../../../assets/imgs/cart-icon-header.png'
import { MenuMobile } from "../../MenuMobile/MenuMobile";
import hamburger from "../../../assets/imgs/menu-hamburger-header.png";
import logo from "../../../assets/imgs/m3-acdemy-logo.png";
import cart from "../../../assets/imgs/cart-icon-header.png";
const HeaderMobile = () => {
const [menuIsVisible, setMenuIsVisible] = useState(false);
const scrollWindow = () => {
window.addEventListener("resize", () => {
if (window.innerWidth <= 1024 && menuIsVisible) {
document.body.style.overflowY = "hidden";
} else {
document.body.style.overflowY = "auto";
}
});
};
useEffect(() => {
scrollWindow();
});
return (
<>
<header className={styles['header-mobile']}>
<div className={styles['header-mobile__top']}>
<button onClick={() => setMenuIsVisible(true)} className={styles['header-mobile__top__icon-hamburger']}>
<img src={hamburger} alt="Imagem Menu Hamburger"/>
<header className={styles["header-mobile"]}>
<div className={styles["header-mobile__top"]}>
<button
onClick={() => setMenuIsVisible(true)}
className={styles["header-mobile__top__icon-hamburger"]}
>
<img src={hamburger} alt="Imagem Menu Hamburger" />
</button>
<a href='/' className={styles['header-mobile__top__icons']}>
<a href="/" className={styles["header-mobile__top__icons"]}>
<img src={logo} alt="Logo M3-ACADEMY" />
</a>
<a href='/' className={styles['header-mobile__top__icons']}>
<img src={cart} alt='Img do Carrinho' />
<a href="/" className={styles["header-mobile__top__icons"]}>
<img src={cart} alt="Img do Carrinho" />
</a>
</div>
<input placeholder='Buscar...' className={styles['header-mobile__input']}/>
<MenuMobile
menuIsVisible={menuIsVisible}
setMenuIsVisible={setMenuIsVisible}
/>
</ header>
<input placeholder="Buscar..." className={styles["header-mobile__input"]} />
<MenuMobile menuIsVisible={menuIsVisible} setMenuIsVisible={setMenuIsVisible} />
</header>
</>
)
}
);
};
export { HeaderMobile }
export { HeaderMobile };

51
src/components/MenuMobile/MenuMobile.tsx
View File

@ -1,34 +1,55 @@
import './MenuMobile.scss'
import "./MenuMobile.scss";
import close from '../../assets/imgs/close-menu-mobile.png'
import close from "../../assets/imgs/close-menu-mobile.png";
import { useEffect } from "react";
interface MenuMobileProps {
menuIsVisible: boolean;
setMenuIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
}
const MenuMobile = ({menuIsVisible, setMenuIsVisible }: MenuMobileProps) => {
const MenuMobile = ({ menuIsVisible, setMenuIsVisible }: MenuMobileProps) => {
useEffect(() => {
if (window.innerWidth <= 1024) {
document.body.style.overflowY = menuIsVisible ? "hidden" : "auto";
} else {
document.body.style.overflowY = "auto";
}
});
return (
<section className={`container-menu ${menuIsVisible && 'opened'} `} onClick={() => setMenuIsVisible(false)}>
<div className={"container-menu__wrapper"} >
<section
className={`container-menu ${menuIsVisible && "opened"} `}
onClick={() => setMenuIsVisible(false)}
>
<div className={"container-menu__wrapper"}>
<div className={"container-menu__top"}>
<a href='/' className={'container-menu__top__log'}>
<a href="/" className={"container-menu__top__log"}>
ENTRAR
</a>
<button className={'container-menu__top__close'} onClick={() => setMenuIsVisible(false)} >
<button
className={"container-menu__top__close"}
onClick={() => setMenuIsVisible(false)}
>
<img src={close} alt="Icone de Fechar Menu" />
</button>
</div>
<div className={'container-menu__bottom'}>
<nav className={'container-menu__bottom__list'}>
<a href="/" className={'container-menu__bottom__list__items-menu'}>CURSOS</a>
<a href="/" className={'container-menu__bottom__list__items-menu'}>SAIBA MAIS</a>
<a href="/" className={'container-menu__bottom__list__items-menu'}>INSTITUCIONAIS</a>
<div className={"container-menu__bottom"}>
<nav className={"container-menu__bottom__list"}>
<a href="/" className={"container-menu__bottom__list__items-menu"}>
CURSOS
</a>
<a href="/" className={"container-menu__bottom__list__items-menu"}>
SAIBA MAIS
</a>
<a href="/" className={"container-menu__bottom__list__items-menu"}>
INSTITUCIONAIS
</a>
</nav>
</div>
</div>
</section>
)
}
);
};
export { MenuMobile }
export { MenuMobile };