Improve Navbar UI/UX of the Website

src/components/Navbar.tsx

@@ -1,143 +1,114 @@
-import { Link } from "react-router-dom";
-import { useState, useContext } from "react";
+import { NavLink, Link, useLocation } from "react-router-dom";
+import { useState, useContext, useEffect } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun } from 'lucide-react';
-
+import { Moon, Sun, Menu, X, UserPlus } from 'lucide-react';
 
 const Navbar: React.FC = () => {
-
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const themeContext = useContext(ThemeContext);
+  const { hash } = useLocation();
 
-  if (!themeContext)
-    return null;
+  // 1. Bot Fix: Reliable scrolling using URL hash
+  useEffect(() => {
+    if (hash === "#features") {
+      const element = document.getElementById("features");
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [hash]);
 
+  if (!themeContext) return null;
   const { toggleTheme, mode } = themeContext;
 
-  return (
-    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
-      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
-        {/* Logo Section */}
-        <Link
-          to="/"
-          className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
-        >
-          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
-          GitHub Tracker
-        </Link>
+  const navLinkStyles = ({ isActive }: { isActive: boolean }) => 
+    `px-5 py-2 rounded-full text-lg font-semibold transition-all duration-300 
+    ${isActive 
+      ? "text-blue-600 bg-blue-100/60 dark:bg-blue-900/40 shadow-sm ring-1 ring-blue-200/50" 
+      : "text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50"
+    }`;
 
-        {/* Desktop Links */}
-        <div className="hidden md:flex space-x-6">
-          <Link
-            to="/"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Home
-          </Link>
-          <Link
-            to="/track"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Tracker
-          </Link>
-          <Link
-            to="/contributors"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Contributors
-          </Link>
-          <Link
-            to="/login"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Login
+  return (
+    <nav className="sticky top-0 z-50 w-full bg-indigo-50/70 dark:bg-gray-900/95 backdrop-blur-xl border-b border-indigo-100/50 dark:border-gray-800 shadow-sm transition-all duration-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-20">
+
+          <Link to="/" className="flex items-center shrink-0 group transition-all active:scale-95">
+            <img src="/crl-icon.png" alt="CRL Icon" className="h-10 w-10 mr-3 drop-shadow-md group-hover:rotate-6 transition-transform" />
+            <div className="flex items-center tracking-tight">
+              <span className="text-2xl font-extrabold text-slate-900 dark:text-white">GitHub</span>
+              <span className="text-2xl font-extrabold text-blue-600 ml-1">Tracker</span>
+            </div>
           </Link>
-          <button
-            onClick={toggleTheme}
-            className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
-          >
-            {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
-          </button>
-        </div>
 
-        {/* Mobile Menu Button */}
-        <div className="md:hidden">
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
-          >
-            <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "rotate-45 translate-y-2" : ""
-              }`}
-            ></span>
-            <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${
-                isOpen ? "opacity-0" : ""
-              }`}
-            ></span>
-            <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "-rotate-45 -translate-y-2" : ""
-              }`}
-            ></span>
-          </button>
-        </div>
-      </div>
+          <div className="hidden lg:flex items-center justify-center flex-1 space-x-1">
+            <NavLink to="/" className={navLinkStyles}>Home</NavLink>
+            <Link to="/#features" className="px-5 py-2 rounded-full text-lg font-semibold text-slate-600 dark:text-gray-300 hover:text-blue-500 transition-all">Features</Link>
+            <NavLink to="/track" className={navLinkStyles}>Tracker</NavLink>
+            <NavLink to="/contributors" className={navLinkStyles}>Contributors</NavLink>
+          </div>
 
-      {/* Mobile Links */}
-      {isOpen && (
-        <div className="md:hidden bg-white dark:bg-gray-800 text-black dark:text-white">
-          <div className="space-y-4 px-6 py-4">
-            <Link
-              to="/"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Home
-            </Link>
-            <Link
-              to="/about"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              About
-            </Link>
-            <Link
-              to="/contact"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Contact
-            </Link>
-            <Link
-              to="/contributors"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Contributors
-            </Link>
-            <Link
-              to="/login"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
+          <div className="hidden lg:flex items-center space-x-5">
+            <div className="h-8 w-[1.5px] bg-indigo-200/60 dark:bg-gray-700 mx-2 rounded-full" />
+
+            {/* 2. Bot Fix: Added aria-label for accessibility */}
+            <button
+              onClick={toggleTheme}
+              className="p-2.5 rounded-full text-slate-500 dark:text-gray-400 bg-white/40 dark:bg-gray-800/40 hover:bg-white transition-all shadow-sm"
+              aria-label={mode === 'dark' ? "Switch to light mode" : "Switch to dark mode"}
             >
-              Login
+              {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+            </button>
+
+            <Link to="/login" className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600 px-2">Login</Link>
+            <Link to="/signup" className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full hover:shadow-lg transition-all active:scale-95">
+              <UserPlus className="h-5 w-5" />
+              <span>Sign Up</span>
             </Link>
+          </div>
+
+          <div className="lg:hidden flex items-center space-x-3">
+            <button onClick={toggleTheme} className="p-2 text-slate-500" aria-label="Toggle theme">
+              {mode === "dark" ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
+            </button>
+
             <button
-              onClick={() => {
-                toggleTheme();
-                setIsOpen(false);
-              }}
-              className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200 w-full text-left"
+              onClick={() => setIsOpen(!isOpen)}
+              className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white"
+              aria-label="Toggle navigation menu"
+              aria-expanded={isOpen}
             >
-              {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
+              {isOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
             </button>
           </div>
         </div>
-      )}
+      </div>
+
+      {/* 3. Bot Fix: Added 'invisible' and 'lg:visible' to prevent ghost keyboard focus */}
+      <div className={`
+        lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-white/95 dark:bg-gray-900
+        ${isOpen 
+          ? "max-h-[600px] opacity-100 border-t border-indigo-50 shadow-2xl visible" 
+          : "max-h-0 opacity-0 invisible"
+        }
+      `}>
+        <div className="px-5 py-10 space-y-4">
+          <MobileNavLink to="/" onClick={() => setIsOpen(false)}>Home</MobileNavLink>
+          <Link to="/#features" className="block px-6 py-4 rounded-2xl text-xl font-bold text-slate-600 dark:text-gray-400 hover:bg-indigo-50" onClick={() => setIsOpen(false)}>Features</Link>
+          <MobileNavLink to="/track" onClick={() => setIsOpen(false)}>Tracker</MobileNavLink>
+          <MobileNavLink to="/contributors" onClick={() => setIsOpen(false)}>Contributors</MobileNavLink>
+          <div className="pt-8 mt-6 border-t border-slate-100 grid grid-cols-2 gap-5">
+            <Link to="/login" className="flex items-center justify-center py-4 text-lg font-bold text-slate-700 bg-slate-50 rounded-2xl" onClick={() => setIsOpen(false)}>Login</Link>
+            <Link to="/signup" className="flex items-center justify-center py-4 text-lg font-bold text-white bg-blue-600 rounded-2xl shadow-lg" onClick={() => setIsOpen(false)}>Sign Up</Link>
+          </div>
+        </div>
+      </div>
     </nav>
   );
 };
 
-export default Navbar;
+const MobileNavLink = ({ to, children, onClick }: { to: string, children: React.ReactNode, onClick: () => void }) => (
+  <NavLink to={to} onClick={onClick} className={({ isActive }) => `block px-6 py-4 rounded-2xl text-xl font-bold transition-all ${isActive ? "bg-blue-600 text-white shadow-lg translate-x-2" : "text-slate-600 dark:text-gray-400 hover:translate-x-1"}`}>{children}</NavLink>
+);
+
+export default Navbar;