Prevent scrolling when mobile nav is open

src/components/Header.tsx

@@ -6,6 +6,7 @@ import breakpoints from "@theme/breakpoints";
 import Navigation from "./Navigation";
 import NavigationMobile from "./NavigationMobile";
 import HeaderLogo from "./HeaderLogo";
+import BlockScroll from "./BlockScroll";
 
 const StyledHeader = styled.header`
   display: flex;
@@ -15,7 +16,7 @@ const StyledHeader = styled.header`
   }
 `;
 
-const Sticky = styled.div<{ $isHidden?: boolean }>`
+const Sticky = styled.div<{ $isHidden?: boolean; $mobileMenuOpen?: boolean }>`
   position: sticky;
   top: 0;
   z-index: 10;
@@ -24,6 +25,8 @@ const Sticky = styled.div<{ $isHidden?: boolean }>`
   background-color: ${colors.darkBlue};
   transition: all 200ms ease-out;
 
+  height: ${(p) => (p.$mobileMenuOpen ? "100vh" : "unset")};
+
   ${(p) => (p.$isHidden ? (`
     transition: all 200ms ease-in;
     transform: translateY(-100%);
@@ -56,7 +59,10 @@ const Header: React.FC = () => {
   }, [mobileMenuOpen]);
 
   return (
-    <Sticky $isHidden={isHidden}>
+    <Sticky $isHidden={isHidden} $mobileMenuOpen={mobileMenuOpen}>
+      { mobileMenuOpen && (
+        <BlockScroll />
+      )}
       <StyledHeader>
         <HeaderLogo />
         <Navigation onMobileMenuOpen={handleMobileMenuClick} />