feat(landing): theme toggle support for landing#177
Conversation
|
@anirudhprmar is attempting to deploy a commit to the maxktz Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughRemoves the hardcoded ChangesTheme Toggle Feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 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)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/layout/navigation-bar.tsx (1)
108-127:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy liftTheme toggle missing from mobile navigation.
The
ThemeTogglecomponent is only rendered in the desktop navigation (line 228) but is not accessible in the mobile header or menu overlay. Mobile users cannot switch themes, creating an inconsistent user experience across device sizes.Consider adding the
ThemeToggleto the mobile header controls alongside the menu button, or include it in the mobile overlay menu.📱 Proposed fix: Add ThemeToggle to mobile header
> <SectionShell className="flex items-center justify-between"> <BrandMenu linkClassName="gap-1 px-5 py-3" wordmarkClassName="scale-95" /> - <button - type="button" - aria-label={mobileMenuOpen ? "Close navigation menu" : "Open navigation menu"} - aria-controls="mobile-navigation-menu" - aria-expanded={mobileMenuOpen} - onClick={() => setMobileMenuOpen((prev) => !prev)} - className="text-foreground/65 dark:text-foreground/50 hover:text-foreground/80 px-5 py-3 transition-colors" - > - {mobileMenuOpen ? <X size={18} /> : <Menu size={18} />} - </button> + <div className="flex items-center gap-2"> + <ThemeToggle /> + <button + type="button" + aria-label={mobileMenuOpen ? "Close navigation menu" : "Open navigation menu"} + aria-controls="mobile-navigation-menu" + aria-expanded={mobileMenuOpen} + onClick={() => setMobileMenuOpen((prev) => !prev)} + className="text-foreground/65 dark:text-foreground/50 hover:text-foreground/80 px-5 py-3 transition-colors" + > + {mobileMenuOpen ? <X size={18} /> : <Menu size={18} />} + </button> + </div> </SectionShell> </motion.div>🤖 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 `@apps/web/src/components/layout/navigation-bar.tsx` around lines 108 - 127, The mobile header is missing the ThemeToggle, so add the ThemeToggle component into the mobile UI (either next to the menu button inside the motion.div/SectionShell block or inside the mobile overlay rendered when mobileMenuOpen is true) so mobile users can change themes; update the JSX where BrandMenu, the menu button (onClick uses setMobileMenuOpen) and icons (X/Menu) are rendered to include <ThemeToggle /> (with any appropriate props already used by the desktop ThemeToggle) and ensure accessibility attributes match the surrounding controls.
🤖 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.
Outside diff comments:
In `@apps/web/src/components/layout/navigation-bar.tsx`:
- Around line 108-127: The mobile header is missing the ThemeToggle, so add the
ThemeToggle component into the mobile UI (either next to the menu button inside
the motion.div/SectionShell block or inside the mobile overlay rendered when
mobileMenuOpen is true) so mobile users can change themes; update the JSX where
BrandMenu, the menu button (onClick uses setMobileMenuOpen) and icons (X/Menu)
are rendered to include <ThemeToggle /> (with any appropriate props already used
by the desktop ThemeToggle) and ensure accessibility attributes match the
surrounding controls.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 50ea83fd-8d93-472f-afa2-6a884f250f7b
📒 Files selected for processing (2)
apps/web/src/app/(marketing)/layout.tsxapps/web/src/components/layout/navigation-bar.tsx
|
Mobile view : |
1 participant
Issue : #75
now a user can toggle both light or dark mode accordingly.
dark mode :
light mode :
Summary by CodeRabbit
New Features
Bug Fixes / Behavior Change