Add No scrolling to body while the Hamburger is opened

Student-Chapter-CSE · Mar 15, 2024 · 13f06a4 · 13f06a4
1 parent 65696f4
commit 13f06a4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/client/component/Navbar/MobileNavbar.jsx b/client/component/Navbar/MobileNavbar.jsx
@@ -17,11 +17,11 @@ const MobileNavbar = () => {
     const [shouldMorph, setMorph] = useState(false);
 
     const handleToggle = () => {
+        document.body.style.overflow = isOpen ? 'auto' : 'hidden';
         setIsOpen(!isOpen);
     };
 
     useEffect(() => {
-
         const trigger = document.createElement('div')
         trigger.style.position = 'absolute';
         trigger.style.top = '0';
@@ -39,6 +39,7 @@ const MobileNavbar = () => {
     useEffect(() => {
         // Hide the mobile navbar when the url changes.
         setIsOpen(false)
+        document.body.style.overflow = 'scroll'
     }, [urlPathname])
 
     return (

diff --git a/client/styles/Navbar.module.css b/client/styles/Navbar.module.css
@@ -142,6 +142,9 @@
     z-index: 9999999999;
     position: fixed;
     top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
 }
 
 .Hamburger_icon {
@@ -204,8 +207,8 @@
 }
 
 .BlurBackground {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     position: absolute;
     z-index: -1;
     top: 0;

diff --git a/client/styles/globals.css b/client/styles/globals.css
@@ -56,7 +56,7 @@ a {
 body {
     background-color: var(--backGround);
     font-family: 'quaz';
-    /* overflow: hidden; */
+    overflow: scroll;
 }
 
 .register_text {