Skip to content

feat: add glassmorphism effect to navbar #330

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 3 commits into
base: main
Choose a base branch
from
+140 −69
Open

feat: add glassmorphism effect to navbar #330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 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
79e21cc
feat: add glassmorphism effect to navbar
Kartikey-Pathak May 19, 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
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 @@ -12,7 +12,7 @@ function App() {
const isFullscreen = FULLSCREEN_ROUTES.includes(location.pathname);

return (
<div className="relative flex flex-col min-h-screen">
<div className="relative bg-[#1F2937] flex flex-col min-h-screen">
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 19, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Avoid hardcoding a dark root background in a theme-aware layout.

Line 15 sets a fixed dark color (bg-[#1F2937]), which can make the light theme look tinted behind translucent UI (notably the glass navbar). Use light/dark classes instead.

Proposed fix 
-      <div className="relative bg-[`#1F2937`] flex flex-col min-h-screen">
+      <div className="relative bg-gray-50 dark:bg-gray-900 flex flex-col min-h-screen">
📝 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
<div className="relative bg-[#1F2937] flex flex-col min-h-screen">
<div className="relative bg-gray-50 dark:bg-gray-900 flex flex-col min-h-screen">
🤖 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/App.tsx` at line 15, The root layout hardcodes a dark background via the
div className "bg-[`#1F2937`]" in App (the root JSX element), which breaks
theme-awareness; replace that hardcoded color with theme-aware utility classes
(e.g., separate light and dark classes such as bg-white and dark:bg-... or your
design-system surface classes) so the root background follows the active theme
and doesn't tint translucent components like the glass navbar; update the
className on the same root div in App.tsx (where "relative bg-[`#1F2937`] flex
flex-col min-h-screen" appears) to use appropriate light/dark classes and remove
the hardcoded hex.

{!isFullscreen && <ScrollProgressBar />}

{!isFullscreen && <Navbar />}
Expand Down
207 changes: 139 additions & 68 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { NavLink, Link } from "react-router-dom";
import { useState, useContext } from "react";
import { ThemeContext } from "../context/ThemeContext";
import { Moon, Sun, Menu, X, UserPlus } from 'lucide-react';
import { Moon, Sun, Menu, X } from "lucide-react";

const Navbar: React.FC = () => {
const [isOpen, setIsOpen] = useState<boolean>(false);
Expand All @@ -10,92 +10,163 @@ const Navbar: React.FC = () => {
if (!themeContext) return null;
const { toggleTheme, mode } = themeContext;

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

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>
<nav className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md 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>

{/* Desktop Links */}
<div className="hidden md:flex space-x-6 items-center">
<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>

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

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

<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"}
>
{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>
</Link>
</div>
<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>
Comment on lines +27 to +53
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 19, 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

Desktop navigation drops Sign Up, creating breakpoint-only access.

/signup is available in mobile nav but missing on desktop. This is a functionality regression for md+ users and inconsistent behavior across responsive layouts.

Proposed fix 
           <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>
+          <Link
+            to="/signup"
+            className="text-lg font-medium px-3 py-1 rounded border border-blue-500 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-all"
+          >
+            Sign Up
+          </Link>

Also applies to: 126-140

🤖 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 27 - 53, The desktop navbar in
Navbar.tsx is missing the Sign Up link (the <Link to="/signup"> entry present in
the mobile nav), causing signup to be accessible only at mobile breakpoints; add
a matching Sign Up <Link to="/signup"> with the same classes/structure as the
other desktop links (same styling used by Home/Tracker/Contributors/Login) so
the signup route is available for md+ users; locate the desktop link group where
those Link components are rendered and insert the Sign Up link there to mirror
the mobile navigation.


<div className="lg:hidden flex items-center space-x-3">
<button onClick={toggleTheme} className="p-2 text-slate-500 dark:text-gray-400" aria-label="Toggle theme">
{mode === "dark" ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
</button>

<button
onClick={() => setIsOpen(!isOpen)}
className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white"
aria-label="Toggle navigation menu"
aria-expanded={isOpen}
>
{isOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
</button>
</div>
<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"
aria-label="Toggle theme"
>
{mode === "dark" ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</button>
</div>

{/* Mobile Menu Button */}
<div className="md:hidden flex items-center space-x-3">
<button
onClick={toggleTheme}
className="p-2 text-slate-500 dark:text-gray-400"
aria-label="Toggle theme"
>
{mode === "dark" ? (
<Sun className="h-6 w-6" />
) : (
<Moon className="h-6 w-6" />
)}
</button>

<button
onClick={() => setIsOpen(!isOpen)}
className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white"
aria-label="Toggle navigation menu"
aria-expanded={isOpen}
>
{isOpen ? (
<X className="h-7 w-7" />
) : (
<Menu className="h-7 w-7" />
)}
</button>
</div>
</div>

{/* Mobile Menu Panel */}
<div className={`
lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-indigo-50/95 dark:bg-gray-900/95 backdrop-blur-xl
${isOpen
? "max-h-[600px] opacity-100 border-t border-indigo-100/50 dark:border-gray-800 shadow-2xl visible"
: "max-h-0 opacity-0 invisible"
}
`}>
<div
className={`
md:hidden overflow-hidden transition-all duration-500 ease-in-out
bg-indigo-50/95 dark:bg-gray-900/95 backdrop-blur-xl
${
isOpen
? "max-h-[600px] opacity-100 border-t border-indigo-100/50 dark:border-gray-800 shadow-2xl visible"
: "max-h-0 opacity-0 invisible"
}
`}
>
<div className="px-5 py-10 space-y-4">
<MobileNavLink to="/" onClick={() => setIsOpen(false)}>Home</MobileNavLink>
<MobileNavLink to="/track" onClick={() => setIsOpen(false)}>Tracker</MobileNavLink>
<MobileNavLink to="/contributors" onClick={() => setIsOpen(false)}>Contributors</MobileNavLink>

<MobileNavLink to="/" onClick={() => setIsOpen(false)}>
Home
</MobileNavLink>

<MobileNavLink to="/track" onClick={() => setIsOpen(false)}>
Tracker
</MobileNavLink>

<MobileNavLink
to="/contributors"
onClick={() => setIsOpen(false)}
>
Contributors
</MobileNavLink>

<div className="pt-8 mt-6 border-t border-indigo-100/50 dark:border-gray-800 grid grid-cols-2 gap-5">
<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>
<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>
<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>

<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>
</div>
</div>
</div>
</nav>
);
};

const MobileNavLink = ({ to, children, onClick }: { to: string, children: React.ReactNode, onClick: () => void }) => (
<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>
const MobileNavLink = ({
to,
children,
onClick,
}: {
to: string;
children: React.ReactNode;
onClick: () => void;
}) => (
<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>
);

export default Navbar;
Loading