🚸 Prevent scrolling when hamburger menu is open (#1631)

carloscuesta · Nov 13, 2023 · eddd14b · eddd14b · vercel · Nov 13, 2023
1 parent 221c054
commit eddd14b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/website/src/components/Layout/Hamburger/index.tsx b/packages/website/src/components/Layout/Hamburger/index.tsx
@@ -20,6 +20,14 @@ const Hamburger = () => {
     return () => Router.events.off('routeChangeStart', onRouteChangeStart)
   }, [])
 
+  useEffect(() => {
+    if (isOpen) {
+      document.body.classList.add('overflow-hidden')
+    } else {
+      document.body.classList.remove('overflow-hidden')
+    }
+  }, [isOpen])
+
   return (
     <div className={styles.hamburger}>
       <button

diff --git a/packages/website/src/utils/theme/theme.css b/packages/website/src/utils/theme/theme.css
@@ -114,6 +114,10 @@ pre {
   padding: 1em;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-x-adjust {
   overflow-x: auto;
 }