From 7247c0ddbcacf3f942b8dd6ae743bb8b695248a1 Mon Sep 17 00:00:00 2001
From: MOHAMMED HANAN M T P <91409429+hanu-14@users.noreply.github.com>
Date: Sat, 18 Jul 2026 08:27:33 +0530
Subject: [PATCH] feat: add hover states to Navbar links (#281)

---
 src/components/layout/Navbar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 97fe48cb3..28710c7f9 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -192,7 +192,7 @@ export function Navbar({ onSignIn, onGetStarted }: NavbarProps) {
           </span>
         </Link>
 
-        <nav aria-label={t("mainNav")} style={{ display: "flex", alignItems: "center", gap: "28px" }} className="hide-on-mobile">
+        <nav aria-label={t("mainNav")} style={{ display: "flex", alignItems: "center", gap: "28px" }} className="hide-on-mobile hover:text-primary transition-colors duration-200">
           {navLinks.map((item) => (
             <Link
               key={item.key}
@@ -204,7 +204,7 @@ export function Navbar({ onSignIn, onGetStarted }: NavbarProps) {
           ))}
         </nav>
 
-        <div style={{ display: "flex", alignItems: "center", gap: "16px" }} className="hide-on-mobile">
+        <div style={{ display: "flex", alignItems: "center", gap: "16px" }} className="hide-on-mobile hover:text-primary transition-colors duration-200">
           <LanguageSwitcher />
           <button
             type="button"
@@ -212,8 +212,8 @@ export function Navbar({ onSignIn, onGetStarted }: NavbarProps) {
             aria-label={!mounted ? t("toggleTheme") : isDarkMode ? t("switchToLight") : t("switchToDark")}
             style={{ background: "none", border: "none", cursor: "pointer", color: "var(--color-ink-mute)", display: "flex", alignItems: "center", justifyContent: "center", padding: "6px", borderRadius: "6px" }}
           >
-            <Moon size={18} className="nav-theme-moon" />
-            <Sun size={18} className="nav-theme-sun" />
+            <Moon size={18} className="nav-theme-moon hover:text-primary transition-colors duration-200" />
+            <Sun size={18} className="nav-theme-sun hover:text-primary transition-colors duration-200" />
           </button>
 
           {user ? (
@@ -245,7 +245,7 @@ export function Navbar({ onSignIn, onGetStarted }: NavbarProps) {
         {/* Mobile menu toggle */}
         <button
           type="button"
-          className="show-on-mobile"
+          className="show-on-mobile hover:text-primary transition-colors duration-200"
           onClick={() => setMobileOpen(!mobileOpen)}
           aria-label={mobileOpen ? t("closeMenu") : t("openMenu")}
           aria-expanded={mobileOpen}