Skip to content

Fix/navbar glass hover clean #299

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

Open
Kartikey-Pathak wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix/navbar glass hover clean #299

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e44ad46
feat: add glassmorphism navbar with theme support
Kartikey-Pathak May 15, 2026
c02c372
fix: remove unintended app changes
Kartikey-Pathak May 17, 2026
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
105 changes: 76 additions & 29 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,39 +18,86 @@ const Navbar: React.FC = () => {
}`;

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>
<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>

<div className="hidden lg:flex items-center justify-center flex-1 space-x-1">
<NavLink to="/" className={navLinkStyles}>Home</NavLink>
<NavLink to="/track" className={navLinkStyles}>Tracker</NavLink>
<NavLink to="/contributors" className={navLinkStyles}>Contributors</NavLink>
</div>
{/* 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
</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>

<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" />
{/* 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>

<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"}
{/* 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)}
>
{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>
Home
</Link>
</div>

Expand Down
Loading