Fix hydration error in Header.js

Website/app/Header.js

@@ -4,28 +4,36 @@ import Image from "next/image";
 import { useState } from "react";
 import Link from "next/link";
 import { useCallback, useEffect } from "react";
+import { useRouter } from 'next/router';
 
-function NavLink({ to, children, cn }) {
+function handleNavLinkClick(to, setOpen) {
+  const router = useRouter();
+  if (window.location.pathname === to) {
+    setOpen(false);
+  } else {
+    router.push(to);
+  }
+}
+
+function NavLink({ to, children, cn, setOpen }) {
   return (
-    <Link
-      scroll={false}
-      href={to}
+    <button
+      onClick={() => handleNavLinkClick(to, setOpen)}
       className={`text-gray-900 hover:text-black ${cn}`}
     >
       {children}
-    </Link>
+    </button>
   );
 }
 
-function MobileNav({ open }) {
+function MobileNav({ open, setOpen }) {
   return (
     <div
       className={`fixed z-10 top-0 left-0 h-screen w-screen bg-top transform ${
         !open && "-translate-x-full"
       } transition-transform duration-300 ease-in-out filter drop-shadow-md`}
     >
       <div className="flex items-start justify-center filter bg-top h-30 m-4 z-50">
-        {/* Logo container */}
         <Link className="text-xl font-semibold z-50" href="/">
           <Image
             src="Drifty1024Thinner1Px.png"
@@ -36,28 +44,29 @@ function MobileNav({ open }) {
         </Link>
       </div>
 
-      {/* Mobile Nav */}
       <div className="flex flex-col pt-12 justify-items-center items-center z-50">
         <NavLink
           to="/about"
           cn="text-2xl font-bold my-6 text-white hover:text-blue-700 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 z-50"
+          setOpen={setOpen}
         >
-          <button>About</button>
+          About
         </NavLink>
         <NavLink
           to="/download"
           cn="text-2xl font-bold my-6 text-white hover:text-blue-700 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 z-50"
+          setOpen={setOpen}
         >
-          <button>Download</button>
+          Download
         </NavLink>
         <NavLink
           to="/contact"
           cn="text-2xl font-bold my-6 text-white hover:text-blue-700 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 z-50"
+          setOpen={setOpen}
         >
-          <button>Contact</button>
+          Contact
         </NavLink>
 
-        {/* Social Icons */}
         <div className="flex justify-center items-center pt-10 z-50">
           <a href="https://discord.gg/DeT4jXPfkG" target="_blank">
             <i
@@ -95,9 +104,7 @@ export default function Header({ props }) {
   }, [props, open]);
 
   useEffect(() => {
-    // add event listener to window
     window.addEventListener("scroll", onScroll, { passive: true });
-    // remove event listener on unmount to prevent memory leaks
     return () => {
       window.removeEventListener("scroll", onScroll);
     };
@@ -128,7 +135,6 @@ export default function Header({ props }) {
           }}
           role={"button"}
         >
-          {/* hamburger button */}
           <span
             className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${
               open ? "rotate-45 translate-y-3.5" : ""
@@ -146,27 +152,18 @@ export default function Header({ props }) {
           />
         </div>
 
-        {/* NAVBAR BUTTONS */}
         <div className="hidden md:flex mr-20 ">
-          <NavLink to="/#" cn="mx-4 flex">
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
-              HOME
-            </button>
+          <NavLink to="/#" cn="mx-4 flex" setOpen={setOpen}>
+            HOME
           </NavLink>
-          <NavLink to="/about" cn="mx-4 flex">
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
-              ABOUT
-            </button>
+          <NavLink to="/about" cn="mx-4 flex" setOpen={setOpen}>
+            ABOUT
           </NavLink>
-          <NavLink to="/download" cn="mx-4 flex">
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
-              DOWNLOAD
-            </button>
+          <NavLink to="/download" cn="mx-4 flex" setOpen={setOpen}>
+            DOWNLOAD
           </NavLink>
-          <NavLink to="/contact" cn="mx-4 flex">
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
-              CONTACT
-            </button>
+          <NavLink to="/contact" cn="mx-4 flex" setOpen={setOpen}>
+            CONTACT
           </NavLink>
           <a href="https://discord.gg/DeT4jXPfkG" target="_blank">
             <i
@@ -187,4 +184,4 @@ export default function Header({ props }) {
       </nav>
     </header>
   );
-}
+}