Merge pull request #175 from Savy011/navbar-fix

Navbar Body-Scroll Fix

Author: sparsh44

components/common/Header/Header.tsx

@@ -1,30 +1,38 @@
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import styles from "../../../styles/components/Header.module.scss";
 import Hamburger from "./Hamburger";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import { useSession } from "next-auth/react";
 import getCookieData from "../../../lib/getCookieData";
 
-function Header() {
+export default function Header() {
     const [menuOpen, setMenuOpen] = useState(false);
     const [active, setActive] = useState("/");
+
+    const isMobile = useMediaQuery("only screen and (max-width : 900px)");
+    const router = useRouter();
+
     const { data: session } = useSession();
     const { data: cookieData } = getCookieData(session);
 
-    function toggleMenu() {
-        setMenuOpen(!menuOpen);
-        menuOpen
-            ? document.body.classList.remove("body-scroll-lock")
-            : document.body.classList.add("body-scroll-lock")
+    const toggleMenu = () => {
+        setMenuOpen(prev => !prev);
+        document.body.classList.toggle("body-scroll-lock", isMobile && !menuOpen)
     }
 
-    const router = useRouter();
 
     useEffect(() => {
         setActive(router.pathname);
-    }, [router.pathname]);
+
+        const removeScrollLock = () =>
+            document.body.classList.toggle("body-scroll-lock", isMobile && menuOpen)
+
+        window.addEventListener('resize', removeScrollLock)
+
+        return () => window.removeEventListener("resize", removeScrollLock)
+    }, [router.pathname, menuOpen, isMobile]);
 
     return (
         <nav className={styles.navbar}>
@@ -92,8 +100,6 @@ function Header() {
     );
 }
 
-export default Header;
-
 const headerItems = [
     {
         href: "/about",
@@ -112,3 +118,27 @@ const headerItems = [
         name: "Events",
     },
 ];
+
+function useMediaQuery(query: string) {
+    const subscribe = useCallback(
+        (callback: () => void) => {
+            const matchMedia = window.matchMedia(query);
+
+            matchMedia.addEventListener("change", callback);
+            return () => {
+                matchMedia.removeEventListener("change", callback);
+            };
+        },
+        [query]
+    );
+
+    const getSnapshot = () => {
+        return window.matchMedia(query).matches;
+    };
+
+    const getServerSnapshot = () => {
+        throw Error("useMediaQuery is a client-only hook");
+    };
+
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

styles/components/Header.module.scss

@@ -19,10 +19,12 @@
     .logo_wrapper {
         padding: 10px 20px;
         z-index: 12;
+
         a {
             display: flex;
             align-items: center;
         }
+
         img {
             height: 60px;
             object-fit: cover;
@@ -56,9 +58,11 @@
             &.active {
                 transform: rotate(45deg);
                 z-index: 12;
+
                 .top {
                     stroke-dashoffset: -68px;
                 }
+
                 .bottom {
                     stroke-dashoffset: -68px;
                 }
@@ -103,17 +107,20 @@
                     cursor: pointer;
                     outline: none;
                     transition: 0.5s;
+
                     &:hover {
                         color: black;
                         transition: all 0.5s;
                     }
                 }
             }
         }
+
         @media screen and (max-width: $navbar-breakpoint) {
             .ham {
                 display: flex;
             }
+
             .menu_modal {
                 background: rgba(255, 255, 255, 0.95);
                 height: 100vh;
@@ -154,8 +161,7 @@
 
                 &.active {
                     transform: translate(-50%, calc(-50% + 70px));
-                    transition: transform 0.35s
-                        cubic-bezier(0.05, 1.04, 0.72, 0.98);
+                    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98);
                 }
             }
         }
@@ -166,4 +172,8 @@
     .navbar {
         padding: 10px 20px;
     }
+
+    .nav_link {
+        font-size: 2rem;
+    }
 }