Skip to content

[GOOD FIRST ISSUE] Add hover states to Navbar links #481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PRODHOSH merged 1 commit into from
Jul 18, 2026
+5 −5
Merged

[GOOD FIRST ISSUE] Add hover states to Navbar links #481

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// useLayoutEffect runs synchronously before the browser paints (client only);
// fall back to useEffect on the server to avoid React's SSR warning. This lets
// us re-assert the theme class before any light frame can reach the screen.
const useIsomorphicLayoutEffect =

Check warning on line 16 in src/components/layout/Navbar.tsx

View workflow job for this annotation

GitHub Actions / build 

'useIsomorphicLayoutEffect' is assigned a value but never used
typeof window !== "undefined" ? useLayoutEffect : useEffect;

interface NavbarProps {
Expand Down Expand Up @@ -192,7 +192,7 @@
</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}
Expand All @@ -204,16 +204,16 @@
))}
</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"
onClick={toggleTheme}
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 ? (
Expand Down Expand Up @@ -245,7 +245,7 @@
{/* 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}
Expand Down
Loading