feat: add glassmorphism effect to navbar#330
Open
Kartikey-Pathak wants to merge 3 commits into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThe PR updates the application's visual appearance by adding a fixed dark background to the root container and refactors the navigation bar. The Navbar now uses plain ChangesUI Styling and Navigation Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/App.tsx`:
- 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.
In `@src/components/Navbar.tsx`:
- Around line 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.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7c30a94e-ded3-4856-9851-9b1580f8393a
📒 Files selected for processing (2)
src/App.tsxsrc/components/Navbar.tsx
|
|
||
| return ( | ||
| <div className="relative flex flex-col min-h-screen"> | ||
| <div className="relative bg-[#1F2937] flex flex-col min-h-screen"> |
Contributor
There was a problem hiding this comment.
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.
Comment on lines
+27
to
+53
| <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> |
Contributor
There was a problem hiding this comment.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Description
This PR enhances the navbar UI by introducing a modern glassmorphism effect while preserving existing functionality and responsiveness.
Changes Made
Why This Change?
How Has This Been Tested?
✅ Tested locally using
npm run devVerified:
Navbar renders correctly on desktop and mobile devices
Glass effect works properly in both:
Text and icons remain readable
No responsiveness or layout issues introduced
Existing navbar functionality remains unchanged
Screenshots (if applicable)
Before
After
Type of Change
Summary by CodeRabbit