Skip to content

feat: add glassmorphism navbar with theme support #260

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 1 commit into
base: main
Choose a base branch
from
Open

feat: add glassmorphism navbar with theme support #260

Show file tree
Hide file tree
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
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import ThemeWrapper from "./context/ThemeContext";
function App() {
return (
<ThemeWrapper>
<div className="relative flex flex-col min-h-screen">
<div className="relative dark:bg-gray-800 flex flex-col min-h-screen">
<ScrollProgressBar />

<Navbar />
Expand Down
27 changes: 12 additions & 15 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Navbar: React.FC = () => {
const { toggleTheme, mode } = themeContext;

return (
<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">
<nav className="sticky top-0 z-50 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm 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
Expand All @@ -30,31 +30,31 @@ const Navbar: React.FC = () => {
<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"
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-sm font-semibold px-3 py-1 rounded-full text-center border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
Comment on lines +33 to +57
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Improve light-mode hover contrast for nav actions.

On Line 33, Line 39, Line 45, Line 51, and Line 57, hover:text-gray-300 becomes too faint against the light glass navbar (bg-white/50), reducing readability on hover. Use theme-aware hover colors.

Suggested fix 
- className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
+ className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"

- className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
+ className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"

- className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
+ className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"

- className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
+ className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"

- className="text-sm font-semibold px-3 py-1 rounded-full text-center border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
+ className="text-sm font-semibold px-3 py-1 rounded-full text-center border border-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 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"
className="text-sm font-semibold px-3 py-1 rounded-full text-center border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
>
Home
</Link>
<Link
to="/track"
className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
>
Tracker
</Link>
<Link
to="/contributors"
className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
>
Contributors
</Link>
<Link
to="/login"
className="text-lg rounded-3xl font-medium hover:text-gray-700 dark:hover:text-gray-300 transition-all px-3 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-full text-center border border-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Navbar.tsx` around lines 33 - 57, The nav Link and button
hover color (currently using hover:text-gray-300) is too low-contrast on the
light glass navbar; update those classNames in the Navbar component (the Link
elements for Home, Tracker, Contributors, Login and the toggleTheme button) to
use theme-aware hover classes such as hover:text-gray-700
dark:hover:text-gray-300 (or equivalent light/dark explicit classes) so the
hover color is dark on light backgrounds and stays light in dark mode; ensure
you update every occurrence of hover:text-gray-300 in those elements to the new
paired classes.

>
{mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
</button>
Expand All @@ -67,19 +67,16 @@ const Navbar: React.FC = () => {
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" : ""
}`}
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" : ""
}`}
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" : ""
}`}
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>
Expand Down
Loading