Fixed detached NavbarMenu scrolling bug

Kevin-Kwan · Dec 19, 2023 · 99c03ac · 99c03ac
1 parent 73db5a5
commit 99c03ac
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/components/NavbarMenu.tsx b/components/NavbarMenu.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 
@@ -7,12 +8,16 @@ type MenuProps = {
 };
 
 const NavbarMenu = ({ isMenuOpen, toggleMenu }: MenuProps) => {
+  useEffect(() => {
+    // If the menu is being opened, prevent scrolling. Otherwise, allow it.
+    document.body.style.overflow = isMenuOpen ? 'hidden' : 'auto';
+  }, [isMenuOpen]);
   return (
     <motion.div
-      style={{ zIndex: 5, backgroundColor: '#171F29' }}
+      style={{ zIndex: 5, backgroundColor: '#171F29', paddingTop: '64px' }}
       className={`${
         isMenuOpen ? 'block' : 'hidden'
-      } fixed text-white w-full flex justify-center text-center md:hidden mt-16`}
+      } fixed text-white w-full flex justify-center text-center md:hidden`}
       initial={{ y: '-100vh' }}
       animate={{ y: isMenuOpen ? '0' : '-100vh' }}
       transition={{ duration: 0.3 }}