Skip to content

Commit c10033b

Browse files
mehul-m-prajapatimehul-m-prajapati
authored
Merge pull request #235 from SiddhiMohite20/fix-navbar-hover-contrast
Fixed navbar hover contrast issue
2 parents 8d17610 + e708cc8 commit c10033b

1 file changed

Lines changed: 80 additions & 52 deletions

File tree

‎src/components/Navbar.tsx‎

Lines changed: 80 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,129 @@
11
import { NavLink, Link } from "react-router-dom";
22
import { useState, useContext } from "react";
33
import { ThemeContext } from "../context/ThemeContext";
4-
import { Moon, Sun, Menu, X, UserPlus } from 'lucide-react';
4+
import { Moon, Sun, Menu, X, UserPlus } from "lucide-react";
55

66
const Navbar: React.FC = () => {
77
const [isOpen, setIsOpen] = useState<boolean>(false);
88
const themeContext = useContext(ThemeContext);
99

1010
if (!themeContext) return null;
11+
1112
const { toggleTheme, mode } = themeContext;
1213

13-
const navLinkStyles = ({ isActive }: { isActive: boolean }) =>
14-
`px-5 py-2 rounded-full text-lg font-semibold transition-all duration-300
15-
${isActive
16-
? "text-blue-600 bg-blue-100/60 dark:bg-blue-900/40 shadow-sm ring-1 ring-blue-200/50"
17-
: "text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50"
14+
const navLinkStyles = ({ isActive }: { isActive: boolean }) =>
15+
`px-5 py-2 rounded-full text-lg font-semibold transition-all duration-300 ${
16+
isActive
17+
? "text-blue-600 bg-blue-100/60 dark:bg-blue-900/40 shadow-sm"
18+
: "text-slate-600 dark:text-gray-300 hover:text-blue-500"
1819
}`;
1920

2021
return (
21-
<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">
22+
<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">
2223
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2324
<div className="flex justify-between items-center h-20">
24-
25-
<Link to="/" className="flex items-center shrink-0 group transition-all active:scale-95">
26-
<img src="/crl-icon.png" alt="CRL Icon" className="h-10 w-10 mr-3 drop-shadow-md group-hover:rotate-6 transition-transform" />
25+
26+
<Link to="/" className="flex items-center shrink-0">
27+
<img
28+
src="/crl-icon.png"
29+
alt="CRL Icon"
30+
className="h-10 w-10 mr-3"
31+
/>
2732
<div className="flex items-center tracking-tight">
28-
<span className="text-2xl font-extrabold text-slate-900 dark:text-white">GitHub</span>
29-
<span className="text-2xl font-extrabold text-blue-600 ml-1">Tracker</span>
33+
<span className="text-2xl font-extrabold text-slate-900 dark:text-white">
34+
GitHub
35+
</span>
36+
<span className="text-2xl font-extrabold text-blue-600 ml-1">
37+
Tracker
38+
</span>
3039
</div>
3140
</Link>
3241

3342
<div className="hidden lg:flex items-center justify-center flex-1 space-x-1">
34-
<NavLink to="/" className={navLinkStyles}>Home</NavLink>
35-
<NavLink to="/track" className={navLinkStyles}>Tracker</NavLink>
36-
<NavLink to="/contributors" className={navLinkStyles}>Contributors</NavLink>
43+
<NavLink to="/" className={navLinkStyles}>
44+
Home
45+
</NavLink>
46+
47+
<NavLink to="/track" className={navLinkStyles}>
48+
Tracker
49+
</NavLink>
50+
51+
<NavLink to="/contributors" className={navLinkStyles}>
52+
Contributors
53+
</NavLink>
3754
</div>
3855

3956
<div className="hidden lg:flex items-center space-x-5">
40-
<div className="h-8 w-[1.5px] bg-indigo-200/60 dark:bg-gray-700 mx-2 rounded-full" />
41-
4257
<button
4358
onClick={toggleTheme}
44-
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"
45-
aria-label={mode === 'dark' ? "Switch to light mode" : "Switch to dark mode"}
59+
className="p-2.5 rounded-full text-slate-500 dark:text-gray-400"
4660
>
47-
{mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
61+
{mode === "dark" ? (
62+
<Sun className="h-5 w-5" />
63+
) : (
64+
<Moon className="h-5 w-5" />
65+
)}
4866
</button>
49-
50-
<Link to="/login" className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600 px-2">Login</Link>
51-
<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">
67+
68+
<Link
69+
to="/login"
70+
className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600"
71+
>
72+
Login
73+
</Link>
74+
75+
<Link
76+
to="/signup"
77+
className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full"
78+
>
5279
<UserPlus className="h-5 w-5" />
5380
<span>Sign Up</span>
5481
</Link>
5582
</div>
5683

5784
<div className="lg:hidden flex items-center space-x-3">
58-
<button onClick={toggleTheme} className="p-2 text-slate-500 dark:text-gray-400" aria-label="Toggle theme">
59-
{mode === "dark" ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
85+
<button
86+
onClick={toggleTheme}
87+
className="p-2 text-slate-500 dark:text-gray-400"
88+
>
89+
{mode === "dark" ? (
90+
<Sun className="h-6 w-6" />
91+
) : (
92+
<Moon className="h-6 w-6" />
93+
)}
6094
</button>
61-
95+
6296
<button
6397
onClick={() => setIsOpen(!isOpen)}
64-
className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white"
65-
aria-label="Toggle navigation menu"
66-
aria-expanded={isOpen}
98+
className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800"
6799
>
68-
{isOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
100+
{isOpen ? (
101+
<X className="h-7 w-7" />
102+
) : (
103+
<Menu className="h-7 w-7" />
104+
)}
69105
</button>
70106
</div>
71107
</div>
72108
</div>
73109

74-
{/* Mobile Menu Panel */}
75-
<div className={`
76-
lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-indigo-50/95 dark:bg-gray-900/95 backdrop-blur-xl
77-
${isOpen
78-
? "max-h-[600px] opacity-100 border-t border-indigo-100/50 dark:border-gray-800 shadow-2xl visible"
79-
: "max-h-0 opacity-0 invisible"
80-
}
81-
`}>
82-
<div className="px-5 py-10 space-y-4">
83-
<MobileNavLink to="/" onClick={() => setIsOpen(false)}>Home</MobileNavLink>
84-
<MobileNavLink to="/track" onClick={() => setIsOpen(false)}>Tracker</MobileNavLink>
85-
<MobileNavLink to="/contributors" onClick={() => setIsOpen(false)}>Contributors</MobileNavLink>
86-
87-
<div className="pt-8 mt-6 border-t border-indigo-100/50 dark:border-gray-800 grid grid-cols-2 gap-5">
88-
<Link to="/login" className="flex items-center justify-center py-4 text-lg font-bold text-slate-700 dark:text-gray-200 bg-white/60 dark:bg-gray-800/60 rounded-2xl border border-indigo-100/50 dark:border-gray-700" onClick={() => setIsOpen(false)}>Login</Link>
89-
<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>
90-
</div>
110+
{isOpen && (
111+
<div className="lg:hidden px-5 py-6 space-y-4 bg-indigo-50 dark:bg-gray-900">
112+
<NavLink to="/" className={navLinkStyles}>
113+
Home
114+
</NavLink>
115+
116+
<NavLink to="/track" className={navLinkStyles}>
117+
Tracker
118+
</NavLink>
119+
120+
<NavLink to="/contributors" className={navLinkStyles}>
121+
Contributors
122+
</NavLink>
91123
</div>
92-
</div>
124+
)}
93125
</nav>
94126
);
95127
};
96128

97-
const MobileNavLink = ({ to, children, onClick }: { to: string, children: React.ReactNode, onClick: () => void }) => (
98-
<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:bg-white/40 dark:hover:bg-gray-800/40"}`}>{children}</NavLink>
99-
);
100-
101129
export default Navbar;

0 commit comments

Comments
 (0)