From ec26c633bf139a3147f556a186817728503b19ff Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Fri, 6 Jan 2023 16:43:54 -0300
Subject: [PATCH] =?UTF-8?q?style(header):=20resolvendo=20problema=20com=20?=
 =?UTF-8?q?scroll=20quando=20menu=20t=C3=A1=20aberto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/Header.tsx              | 48 +++++++++++++++----
 src/components/Header/HeaderContentBottom.tsx | 12 ++++-
 2 files changed, 50 insertions(+), 10 deletions(-)

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 (
     <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>
   );
 };
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 (
     <>
     <div className={