fix: all navigation bugs

Judge-Paul · Aug 21, 2023 · 543dc6f · 543dc6f
1 parent e05a777
commit 543dc6f
Showing 1 changed file with 31 additions and 38 deletions.
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Logo from "../assets/logo.png";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { IoClose, IoMenu } from "react-icons/io5";
 import { motion } from "framer-motion";
 
@@ -11,6 +11,17 @@ function Navbar() {
     hidden: { opacity: 0, y: -20 },
     visible: { opacity: 1, y: 0 },
   };
+  const navigate = useNavigate();
+  const links = [
+    { route: "/", name: "Home" },
+    { route: "/create", name: "Try It" },
+    { route: "/examples", name: "Examples" },
+    { route: "/about", name: "About" },
+  ];
+  useEffect(() => {
+    setIsOpen(false);
+    window.scrollTo(0, 0);
+  }, [navigate]);
   useEffect(() => {
     const handleScroll = () => {
       if (window.scrollY > 10) {
@@ -40,18 +51,15 @@ function Navbar() {
           <img src={Logo} alt="Logo" className="h-10 md:h-12" />
         </Link>
         <div className="hidden md:flex mt-2 text-[#3a4688] font-bold">
-          <Link to="/create" className="mx-4 lg:mx-7">
-            Try It
-          </Link>
-          <Link to="/examples" className="mx-4 lg:mx-7">
-            Examples
-          </Link>
-          <Link to="/about" className="mx-4 lg:mx-7">
-            About
-          </Link>
-          <Link to="/pricing" className="mx-4 lg:mx-7">
-            Pricing
-          </Link>
+          {links.map((link) => (
+            <Link
+              to={link.route}
+              className="mx-4 lg:mx-7"
+              onClick={() => setIsOpen(false)}
+            >
+              {link.name}
+            </Link>
+          ))}
         </div>
         <div className="md:hidden" onClick={() => setIsOpen(true)}>
           <IoMenu size={37} className="text-[#004fb6] cursor-pointer" />
@@ -63,33 +71,18 @@ function Navbar() {
           initial="hidden"
           animate="visible"
           variants={navAnimation}
-          className="md:hidden min-h-screen font-workSans w-screen fixed bg-[#9fcaff] text-[#3a4688] z-[9999] flex justify-center items-center"
+          className="md:hidden top-0 h-screen font-workSans w-screen fixed bg-[#9fcaff] text-[#3a4688] z-[9999] flex justify-center items-center"
         >
           <div className="font-bold text-center">
-            <Link
-              to="/create"
-              className="block my-3 text-lg hover:text-[#29306f]"
-            >
-              Try It
-            </Link>
-            <Link
-              to="/examples"
-              className="block my-3 text-lg hover:text-[#29306f]"
-            >
-              Examples
-            </Link>
-            <Link
-              to="/about"
-              className="block my-3 text-lg hover:text-[#29306f]"
-            >
-              About
-            </Link>
-            <Link
-              to="/pricing"
-              className="block my-3 text-lg hover:text-[#29306f]"
-            >
-              Pricing
-            </Link>
+            {links.map((link) => (
+              <Link
+                to={link.route}
+                className="block my-3 text-lg hover:text-[#29306f]"
+                onClick={() => setIsOpen(false)}
+              >
+                {link.name}
+              </Link>
+            ))}
             <button
               onClick={() => setIsOpen(false)}
               className="mt-5 flex mx-auto items-center justify-center w-12 h-12 rounded-full bg-[#3a4688] hover:bg-[#29306f]"