fix: The route is imroved.

Suraj-kumar00 · Sep 14, 2024 · d37ab8c · d37ab8c
1 parent fff50de
commit d37ab8c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/sections/Contact.tsx b/src/sections/Contact.tsx
@@ -27,7 +27,7 @@ export const ContactSection = () => {
                 href="mailto:[email protected]"
                 className="inline-block"
               >
-                <button className="text-white bg-gray-900 inline-flex items-center px-6 h-12 rounded-xl gap-2 w-max border border-gray-900  hover:bg-gray-700 z-1000">
+                <button className="text-white bg-gray-900 inline-flex items-center px-6 h-12 rounded-xl gap-2 w-max border border-gray-900  hover:bg-gray-700 ">
                   Contact Me
                   <ArrowUpRightIcon className="w-4 h-4" />
                 </button>

diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx
@@ -1,18 +1,51 @@
+"use client";
+// Updated to use next/navigation
+import { useRouter } from "next/navigation";
+import { MouseEvent } from "react";
+
 export const Header = () => {
+  const router = useRouter();
+
+  const handleNavigation = (
+    e: MouseEvent<HTMLAnchorElement>,
+    sectionId: string
+  ) => {
+    e.preventDefault(); // Prevent default anchor behavior (removes the # from URL)
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+      // Use router.push to update the URL without the hash
+      // router.push("/");
+    }
+  };
+
   return (
     <div className="flex justify-center items-center fixed top-3 w-full z-10">
       <nav className="flex gap-1 p-0.5 border border-white/15 rounded-full bg-white/10 backdrop-blur">
-        <a href="#home" className="nav-item">
+        <a
+          href="#home"
+          onClick={(e) => handleNavigation(e, "home")}
+          className="nav-item"
+        >
           Home
         </a>
-        <a href="#project" className="nav-item">
+        <a
+          href="#project"
+          onClick={(e) => handleNavigation(e, "project")}
+          className="nav-item"
+        >
           Project
         </a>
-        <a href="#about" className="nav-item">
+        <a
+          href="#about"
+          onClick={(e) => handleNavigation(e, "about")}
+          className="nav-item"
+        >
           About
         </a>
         <a
           href="#contact"
+          onClick={(e) => handleNavigation(e, "contact")}
           className="nav-item bg-white text-gray-900 hover:bg-white/70 hover:text-gray-900"
         >
           Contact