enhance navbar

src/components/Navbar.tsx

@@ -1,12 +1,35 @@
-import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
-import { useState, useContext } from "react";
+import { NavLink, Link } from "react-router-dom";
+import { useState, useContext, useRef, useEffect } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 import { Moon, Sun, Menu, X } from "lucide-react";
 
+const navItems = [
+  { to: "/", label: "Home" },
+  { to: "/track", label: "Tracker" },
+  { to: "/contributors", label: "Contributors" },
+  { to: "/login", label: "Login" },
+];
+
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const [user, setUser] = useState<NavbarUser | null>(() => readStoredUser());
-
+  const [pillStyle, setPillStyle] = useState<{
+    left: number;
+    width: number;
+    opacity: number;
+  }>({ left: 0, width: 0, opacity: 0 });
+
+  const [scrolled,setScrolled]= useState(false);
+  useEffect( () => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY>20);
+    };
+
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  },[]);
+
+  const navRef = useRef<HTMLDivElement>(null);
   const themeContext = useContext(ThemeContext);
   const navigate = useNavigate();
   const location = useLocation();
@@ -16,55 +39,39 @@ const Navbar: React.FC = () => {
   const { toggleTheme, mode } = themeContext;
   const { isAuthenticated, isLoading, logout } = authContext;
 
-  const navLinkStyles = ({ isActive }: { isActive: boolean }) =>
-    `px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 ${
-      isActive
-        ? "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-900/40 shadow-sm"
-        : "text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-800"
-    }`;
-
-  const featureLinkStyles =
-    "px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500 cursor-pointer";
-
   const closeMenu = () => setIsOpen(false);
-  const handleLogout = () => {
-    if (typeof window !== "undefined") {
-      window.localStorage.removeItem(AUTH_STORAGE_KEY);
-    }
-    setUser(null);
-    closeMenu();
-  };
 
-  const handleLogout = async () => {
-    try {
-      await logout();
-      navigate("/login", { replace: true });
-    } catch {
-      // optionally surface a toast/message
-    } finally {
-      closeMenu();
-    }
+  const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    const nav = navRef.current;
+    const item = e.currentTarget;
+    if (!nav) return;
+    const navRect = nav.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    setPillStyle({
+      left: itemRect.left - navRect.left,
+      width: itemRect.width,
+      opacity: 1,
+    });
   };
 
-  // Smooth scroll to #features on homepage
-  const handleFeaturesClick = () => {
-    closeMenu();
-    if (location.pathname === "/") {
-      const section = document.getElementById("features");
-      if (section) {
-        section.scrollIntoView({ behavior: "smooth" });
-      }
-    } else {
-      navigate("/#features");
-      setTimeout(() => {
-        const section = document.getElementById("features");
-        if (section) section.scrollIntoView({ behavior: "smooth" });
-      }, 100);
-    }
+  const handleMouseLeave = () => {
+    setPillStyle((prev) => ({ ...prev, opacity: 0 }));
   };
 
+  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+    `relative z-10 px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-colors duration-200 ${
+      isActive
+        ? "text-blue-600 dark:text-blue-400"
+        : "text-slate-700 dark:text-gray-300"
+    }`;
+
   return (
-    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-colors duration-300 backdrop-blur">
+      <nav className={`sticky top-0 z-50 border-b transition-all duration-300 ${
+          scrolled
+            ? "bg-white/70 dark:bg-gray-900/70 backdrop-blur-2xl border-gray-200 dark:border-gray-800 shadow-sm"
+            : "bg-white dark:bg-gray-900 border-transparent"
+        }`}
+      >
       <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
         <Link
           to="/"
@@ -78,34 +85,39 @@ const Navbar: React.FC = () => {
           <span>GitHub Tracker</span>
         </Link>
 
-        <div className="hidden md:flex items-center gap-3">
-          <NavLink to="/" end className={navLinkStyles}>
-            Home
-          </NavLink>
-
-          {/* Features: smooth scroll to #features section on homepage */}
-          <span className={featureLinkStyles} onClick={handleFeaturesClick}>
-            Features
-          </span>
-
-          <NavLink to="/about" className={navLinkStyles}>
-            About
-          </NavLink>
-
-          <NavLink to="/track" className={navLinkStyles}>
-            Tracker
-          </NavLink>
-          <NavLink to="/contributors" className={navLinkStyles}>
-            Contributors
-          </NavLink>
-
-          {user ? (
-            <ProfileDropdown user={user} onLogout={handleLogout} />
-          ) : (
-            <NavLink to="/login" className={navLinkStyles}>
-              Login
+        {/* Desktop Navigation */}
+        <div
+          ref={navRef}
+          className="hidden md:flex items-center gap-1 relative"
+          onMouseLeave={handleMouseLeave}
+        >
+          {/* Sliding pill */}
+          <span
+            className="absolute top-0 h-full rounded-xl bg-gray-100 dark:bg-gray-800 pointer-events-none"
+            style={{
+              left: pillStyle.left,
+              width: pillStyle.width,
+              opacity: pillStyle.opacity,
+              transition: "left 0.2s ease, width 0.2s ease, opacity 0.15s ease",
+              backdropFilter: "blur(20px)",
+              WebkitBackdropFilter: "blur(20px)",
+              background:
+                mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.35)",
+              boxShadow:
+                mode === "dark" ? "0 4px 20px rgba(0,0,0,0.25)" : "0 4px 20px rgba(0,0,0,0.08)",
+            }}
+          />
+
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              onMouseEnter={handleMouseEnter}
+              className={navLinkClass}
+            >
+              {item.label}
             </NavLink>
-          )}
+          ))}
 
           <button
             onClick={toggleTheme}
@@ -121,7 +133,6 @@ const Navbar: React.FC = () => {
         </div>
 
         <div className="md:hidden flex items-center gap-2">
-          {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
             className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -130,9 +141,10 @@ const Navbar: React.FC = () => {
             {mode === "dark" ? (
               <Sun className="h-5 w-5 text-yellow-400" />
             ) : (
-              <Moon className="h-5 w-5 text-white" />
+              <Moon className="h-5 w-5 text-black" />
             )}
           </button>
+
           <button
             onClick={() => setIsOpen(!isOpen)}
             className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -148,32 +160,24 @@ const Navbar: React.FC = () => {
       </div>
 
       {isOpen && (
-        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 ani-fade-in">
           <div className="px-6 py-5 flex flex-col gap-3">
-            <NavLink to="/" end className={navLinkStyles} onClick={closeMenu}>
-              Home
-            </NavLink>
-
-            {/* Features: smooth scroll to #features section on homepage */}
-            <span className={featureLinkStyles} onClick={handleFeaturesClick}>
-              Features
-            </span>
-
-            <NavLink to="/about" className={navLinkStyles} onClick={closeMenu}>
-              About
-            </NavLink>
-
-            <NavLink to="/track" className={navLinkStyles} onClick={closeMenu}>
-              Tracker
-            </NavLink>
-
-            <NavLink to="/contributors" className={navLinkStyles} onClick={closeMenu}>
-              Contributors
-            </NavLink>
-
-            <NavLink to="/login" className={navLinkStyles} onClick={closeMenu}>
-              Login
-            </NavLink>
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                onClick={closeMenu}
+                className={({ isActive }) =>
+                  `px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300 ${
+                    isActive
+                      ? "text-blue-600 bg-blue-100 dark:bg-blue-900/40 shadow-sm"
+                      : "text-slate-700 dark:text-gray-300 hover:text-blue-500"
+                  }`
+                }
+              >
+                {item.label}
+              </NavLink>
+            ))}
           </div>
         </div>
       )}