Fix nav bar scrolling issue on mobile devices (#672)

* fixed mobile nav issue, now need to make it nonscrollable or disable features * Fix Mobile Nav: When scrolling the nav is closed * Fix Coderabbit Issue --------- Co-authored-by: Saptarshi Sarkar <[email protected]>
SaptarshiSarkar12 · Oct 4, 2024 · c0b7873 · c0b7873
1 parent ddf6dba
commit c0b7873
Showing 1 changed file with 38 additions and 26 deletions.
diff --git a/Website/app/Header.js b/Website/app/Header.js
@@ -20,13 +20,13 @@ function NavLink({ to, children, cn }) {
 function MobileNav({ open }) {
   return (
     <div
-      className={`absolute z-10 top-0 left-0 h-screen w-screen bg-top transform ${
+      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">
-        {/*logo container*/}
-        <Link className="text-xl font-semibold" href="/">
+      <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"
             width={80}
@@ -35,39 +35,42 @@ function MobileNav({ open }) {
           />
         </Link>
       </div>
+
       {/* Mobile Nav */}
-      <div className="flex flex-col pt-12 justify-items-center items-center">
+      <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"
+          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"
         >
-          <button className="">About</button>
+          <button>About</button>
         </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"
+          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"
         >
-          <button className="">Download</button>
+          <button>Download</button>
         </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"
+          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"
         >
-          <button className="">Contact</button>
+          <button>Contact</button>
         </NavLink>
-        <div className="flex justify-center items-center pt-10">
+
+        {/* Social Icons */}
+        <div className="flex justify-center items-center pt-10 z-50">
           <a href="https://discord.gg/DeT4jXPfkG" target="_blank">
             <i
               className={
-                "fab fa-discord text-4xl text-white mx-8 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 hover:text-violet-600"
+                "fab fa-discord text-4xl text-white mx-8 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 hover:text-violet-600 z-50"
               }
             ></i>
           </a>
 
           <a href="https://github.com/SaptarshiSarkar12/Drifty" target="_blank">
             <i
               className={
-                "fab fa-github text-4xl text-white mx-8 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 hover:text-black"
+                "fab fa-github text-4xl text-white mx-8 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 hover:text-black z-50"
               }
             ></i>
           </a>
@@ -77,22 +80,31 @@ function MobileNav({ open }) {
   );
 }
 
+
+
+
 export default function Header({ props }) {
   const [open, setOpen] = useState(false);
   const [hcolor, setHcolor] = useState(props + " pt-7");
-  const onScroll = useCallback(() => {
-    const { scrollY } = window;
-    if (window.innerWidth > 760) {
-      if (scrollY === 0) setHcolor(props + " pt-7");
-      else setHcolor("bg-var shadow-lg pt-4");
-    }
-  }, [props]);
+const onScroll = useCallback(() => {
+  const { scrollY } = window;
+  if (window.innerWidth <= 760 && open) {
+    setOpen(false);
+  }
+  if (window.innerWidth > 760) {
+    if (scrollY === 0) setHcolor(props + " pt-7");
+    else setHcolor("bg-var shadow-lg pt-4");
+  }
+}, [props, open]);
 
-  useEffect(() => {
-    //add event listener to window
-    window.addEventListener("scroll", onScroll, { passive: true });
-    // remove event on unmounting to prevent Linkmemory leak with the cleanup
-  }, [onScroll]);
+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);
+  };
+}, [onScroll]);
 
   return (
     <header