Fix for navbar

Priyaaa1 · Jun 26, 2024 · f400739 · f400739
1 parent 7216b6d
commit f400739
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import { scroller } from "react-scroll";
-import { useLocation, NavLink } from "react-router-dom";
+import { useLocation, NavLink, useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from 'react-redux';
 import { changeTheme } from "../../features/theme";
 import logo from "../../assets/logo2.png";
@@ -11,6 +11,7 @@ import "./Navbar.css";
 
 const Navbar = () => {
   const location = useLocation();
+  const navigate = useNavigate();
   const [sticky, setSticky] = useState(false);
   const [mobileMenu, setMobileMenu] = useState(false);
   const [visible, setVisible] = useState(true);
@@ -59,8 +60,9 @@ const Navbar = () => {
     setMobileMenu(!mobileMenu);
   };
 
-  const handleMenuItemClick = (sectionId, offset) => {
-    scrollToSection(sectionId, offset);
+  const handleMenuItemClick = (path, sectionId, offset) => {
+    navigate(path);
+    setTimeout(() => scrollToSection(sectionId, offset), 0);
     setMobileMenu(false);
   };
 
@@ -82,28 +84,28 @@ const Navbar = () => {
           : ""
       } ${visible ? "" : "hidden-nav"} ${theme}`}
     >
-      <NavLink to="/" onClick={() => handleMenuItemClick("hero", 0)}>
+      <NavLink to="/" onClick={() => handleMenuItemClick("/", "hero", 0)}>
         <p>Start Connect Hub</p>
         <img src={logo} alt="Logo" className="logo" />
       </NavLink>
       <ul ref={menuRef} className={mobileMenu ? "show-mobile-menu" : ""}>
         <li>
           <div className="nav1">
-            <NavLink to="/" onClick={() => handleMenuItemClick("hero", 0)}>
+            <NavLink to="/" onClick={() => handleMenuItemClick("/", "hero", 0)}>
               Home
             </NavLink>
           </div>
         </li>
         <li>
           <div className="nav1">
-            <NavLink to="/#about" onClick={() => handleMenuItemClick("about", -260)}>
+            <NavLink to="/#about" onClick={() => handleMenuItemClick("/", "about", -260)}>
               About
             </NavLink>
           </div>
         </li>
         <li>
           <div className="nav1">
-            <NavLink to="/#testimonials" onClick={() => handleMenuItemClick("testimonials", -260)}>
+            <NavLink to="/#testimonials" onClick={() => handleMenuItemClick("/", "testimonials", -260)}>
               Testimonials
             </NavLink>
           </div>
@@ -117,7 +119,7 @@ const Navbar = () => {
         </li> */}
         <li>
           <div className="nav1">
-            <NavLink to="/#contact" onClick={() => handleMenuItemClick("contact", -260)}>
+            <NavLink to="/#contact" onClick={() => handleMenuItemClick("/", "contact", -260)}>
               Contact Us
             </NavLink>
           </div>
@@ -130,7 +132,7 @@ const Navbar = () => {
           </div>
         </li> */}
         <li>
-          <NavLink to="/login" onClick={() => setMobileMenu(false)}>
+          <NavLink to="/login" onClick={() => handleMenuItemClick("/login", null, 0)}>
             <button className='logIn'>LOG IN</button>
           </NavLink>
         </li>
@@ -145,7 +147,7 @@ const Navbar = () => {
         onClick={toggleMenu}
         ref={menuIconRef}
       />
-    </nav> 
+    </nav>
   );
 };