feat: Mobile responsive UI with sidebar navigation #52
Conversation
WalkthroughThis PR comprehensively restructures the UI for improved responsive design across the main pages and navigation. Changes include reworking the explorer page layout with adjusted typography, grid structures, and pagination controls; simplifying the global content container; redesigning the homepage hero and revolution sections with responsive image placement; and adding mobile navigation menu support with toggle functionality. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/navigation.tsx (1)
54-77: Fix incorrect active route highlighting for navigation buttons.The pathname checks for "Organize a Hackathon" and "My Hackathons" buttons are swapped:
- Line 58 checks
pathname === "/myHackathons"but the button links to/createHackathon- Line 70 checks
pathname === "/createHackathon"but the button links to/myHackathonsThis causes the wrong button to be highlighted when navigating.
Apply this diff:
<Link href="/createHackathon"> <Button variant="ghost" className={`${ - pathname === "/myHackathons" + pathname === "/createHackathon" ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80" } transition-all duration-200 font-medium`} > Organize a Hackathon </Button> </Link> <Link href="/myHackathons"> <Button variant="ghost" className={`${ - pathname === "/createHackathon" + pathname === "/myHackathons" ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80" } transition-all duration-200 font-medium`} > My Hackathons </Button> </Link>
🧹 Nitpick comments (1)
app/page.tsx (1)
214-296: LGTM: Responsive hero section with adaptive layout.The hero section effectively transitions from mobile to desktop:
- Full-width on mobile with stacked content
- Two-column grid on large screens
- Progressive typography scaling across 5 breakpoints
- Appropriate image sizing for each viewport
The dual-image approach (one for mobile inline, one for desktop background) ensures optimal positioning but does mean the same image is included twice in the markup. Consider using a single image with responsive positioning via CSS in a future refactor.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/explorer/page.tsx(12 hunks)app/layout.tsx(1 hunks)app/page.tsx(8 hunks)components/navigation.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
app/explorer/page.tsx (1)
hooks/useHackathons.ts (1)
getHackathonStatus(66-72)
app/page.tsx (3)
components/ui/button.tsx (1)
Button(56-56)components/ui/card.tsx (1)
Card(79-79)providers/web3-provider.js (1)
error(54-54)
🔇 Additional comments (15)
components/navigation.tsx (4)
12-15: LGTM: getImagePath helper improvement.The updated logic correctly ensures a leading slash for GitHub Pages compatibility.
82-127: LGTM: Well-implemented mobile menu toggle and header.The mobile menu toggle button and sidebar header are properly implemented with:
- Accessibility labels
- Proper icon switching (Menu ↔ X)
- Click handlers for opening/closing
- Responsive visibility (hidden on md+)
147-177: Fix incorrect active route highlighting in mobile navigation.The same pathname check issue from the desktop navigation exists here:
- Line 154 checks
pathname === "/createHackathon"but the link is to/createHackathon✓ (this one is correct)- Line 170 checks
pathname === "/myHackathons"but the link is to/myHackathons✓ (this one is correct)Wait, let me recheck... Actually, looking more carefully:
- Lines 147-161: Link to "/createHackathon", checks pathname === "/createHackathon" ✓ CORRECT
- Lines 163-177: Link to "/myHackathons", checks pathname === "/myHackathons" ✓ CORRECT
The mobile navigation pathname checks are actually correct! Good work here.
104-187: LGTM: Mobile sidebar with overlay and navigation.Excellent implementation with:
- Semi-transparent overlay for backdrop
- Click-outside to close behavior
- Smooth transitions (
transition-transform duration-300)- Navigation links that close the menu on click
- ConnectButton positioned at the bottom
app/layout.tsx (1)
30-30: LGTM: Full-width layout for responsive design.Changing from constrained layout (
max-w-8xl mx-32 px-4...) tow-fullallows individual pages to control their own responsive padding and width, which aligns with the responsive updates in the explorer and home pages.app/explorer/page.tsx (6)
389-409: LGTM: Responsive loading state.The loading state implements consistent responsive patterns:
- Progressive padding across breakpoints
- Responsive heading typography
- Appropriately sized loader icon
- Clear loading messages
411-461: LGTM: Responsive error state with helpful messaging.The error state maintains consistency with:
- Matching responsive padding and typography
- Network status indicators
- Clear error messages with retry action
464-532: LGTM: Responsive header with adaptive controls.Excellent responsive layout that adapts from mobile to desktop:
- Vertically stacked on mobile, horizontal on desktop
- Full-width controls on mobile for easier touch targets
- Consistent spacing and typography progression
- Smart use of flexbox direction changes
535-729: LGTM: Responsive card grids with smooth breakpoint transitions.The hackathon grids scale appropriately:
- Single column on mobile for easy reading
- 2 columns on small tablets
- 3-4 columns on desktop for density
- Consistent gap spacing and card styling
732-787: LGTM: Mobile-friendly pagination controls.Pagination controls adapt effectively:
- Vertical stacking on mobile for easier navigation
- Full-width Previous/Next buttons on mobile
- Minimum width on page number buttons prevents layout issues
- Smooth transition to horizontal layout on larger screens
790-825: LGTM: Responsive empty states with clear CTAs.Both empty state variations implement responsive patterns consistently:
- Appropriately sized icons and typography
- Full-width action buttons on mobile
- Clear messaging with helpful context
- Symmetric padding and spacing
app/page.tsx (4)
299-339: LGTM: Consistent responsive header pattern.The revolution section header maintains consistency with the explorer page:
- Adaptive flex direction
- Full-width controls on mobile
- Progressive typography scaling
- Proper sync button placement
342-403: LGTM: Responsive carousel with progressive sizing.The hackathon carousel scales appropriately:
- Height adapts from 40vh on mobile to 50vh on desktop
- Card width grows from 280px to 350px across breakpoints
- Card spacing increases proportionally
- Infinite scroll animation works consistently
406-410: LGTM: Responsive loading state.Loading state maintains carousel height and uses appropriately sized spinner.
413-443: LGTM: Consistent state panels with matched heights.Error and empty states maintain carousel container height, preventing layout shifts:
- Consistent height across all states
- Responsive padding and typography
- Full-width buttons on mobile
- Clear messaging and CTAs
1 participant
📱 Overview
Implemented comprehensive mobile responsiveness across the application, including home page, explorer page, and a mobile-friendly sidebar navigation system. This update ensures a seamless user experience across all device sizes from mobile (320px) to desktop (2XL+).
📸 Visual Changes
Before:
After:
🔗 Related Issue
Closes #49
Summary by CodeRabbit
New Features
UI/Design