diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 4f11655..47382a3 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -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 (
- + + + +
); }; diff --git a/src/components/Header/HeaderContentBottom.tsx b/src/components/Header/HeaderContentBottom.tsx index 5d02795..c855cfd 100644 --- a/src/components/Header/HeaderContentBottom.tsx +++ b/src/components/Header/HeaderContentBottom.tsx @@ -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 ( <>