Mobile Navbar Redesign with Enhanced Desktop Responsiveness #16
Conversation
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
…cator DESKTOP ONLY - Mobile implementation pending Added sophisticated header navigation system with real-time animated triangle indicator that tracks active/hovered sections with smooth spring physics. Header Navigation Features: - Animated triangle indicator with conditional spring behavior * Instant follow during layout changes (no double-spring) * Smooth spring animation (stiffness: 300, damping: 20, mass: 0.4) for navigation - Real-time position tracking via requestAnimationFrame for all nav links - Debounced hover (100ms) to prevent triangle jumping when crossing diamond separators - Layout animations using Framer Motion's LayoutGroup for smooth transitions - Nav links jump up 10% and scale on hover/active state Header Design & Layout: - Textured background (Patch.png) with rope border - scoped to nav section only - Full-width header container for logo positioning - Centered responsive background (50% width, 650px-720px range) - Rounded corners with overflow hidden for polished appearance - Text selection disabled, custom cursors for UX polish REGISTER Link Behavior: - Hidden by default at page top (< 100px scroll) - Fades in with slide-from-right animation after scrolling - Auto-hides when "Register Now" CTA button is visible in viewport - Links to register.hacklahoma.org (opens in new tab) - Supports hover tracking and triangle indicator Register Now Buttons: - Converted to semantic <a> tags linking to register.hacklahoma.org - Mobile button (< 600px): Below title - Desktop button (>= 600px): Bottom right corner - Both open registration in new tab Technical Implementation: - useMotionValue + useSpring for triangle physics - Conditional spring config based on movement reason (layout vs navigation) - Visibility-based scroll detection with 40% threshold for sections - AnimatePresence with mode="popLayout" for simultaneous animations - Section tracking with dynamic getBoundingClientRect calculations Assets Added: - Header texture (Patch.png) - Rope border pattern (HeaderRope.png) Files Modified: - Header.tsx: Complete redesign with animation system - LandingView.tsx: Added IDs to Register buttons, converted to links Next Steps: - Mobile header implementation - Mobile menu styling and animations
…onsiveness MOBILE NAVBAR ENHANCEMENTS: - Repositioned header to top-0 on mobile devices for better screen utilization - Removed modal backdrop to prevent accidental dismissals - Moved BACK button to right side with increased padding for better tap target - Added new MobileHeader.png and RegisterButton.png assets Mobile Menu Styling: - Applied 80% saturation filter to background for softer appearance - Added subtle blur overlays on left (10px) and bottom (8px) edges - Implemented custom dashed dividers between menu items with 0.4px blur - Added circular bullet points (#947b53) to navigation items - Made dividers 95% width, right-aligned with #9e8f7b color - Set menu items to 90% width container for improved visual balance Mobile Menu Layout: - Restructured navigation with full-width, non-rounded menu items - Moved REGISTER button to bottom-center position - Replaced text-based register link with image button - Container positioned at top-4 right-4 with custom sizing (260px) Mobile Menu Animations: - Converted to Framer Motion with AnimatePresence for smooth transitions - Added slide-in animation from right (300px) with scale effect (0.9 to 1) - Implemented 0.6s duration with custom easing curve [0.22, 1, 0.36, 1] - Added dramatic tap animations to all interactive elements: * BACK button: 85% scale with 70% opacity * Nav links: 92% scale with 5px right shift, transform origin from left * REGISTER button: 88% scale with -2deg rotation - Spring transitions with 400 stiffness and 17 damping for responsive feedback DESKTOP HEADER IMPROVEMENTS: - Implemented responsive breakpoint system using CSS media queries: * md (768px+): 70% width, 550px min, 600px max * lg (1024px+): 750px min/max * xl (1280px+): 800px max - Added smooth 300ms transitions for size changes - Responsive text sizing: md:text-lg → lg:text-xl - Responsive padding: px-3 → md:px-4 → lg:px-6 - Increased triangle hover delay from 100ms to 300ms for smoother UX - All responsive behavior handled via CSS for optimal performance TECHNICAL IMPROVEMENTS: - Zero JavaScript overhead for responsive sizing (pure CSS approach) - Maintained existing triangle tracking logic without performance impact - Preserved all accessibility features and ARIA labels - Ensured smooth animations across all devices This commit completes the mobile navbar redesign with modern animations, improved touch targets, and a polished visual design while enhancing desktop responsiveness across all screen sizes.
…ed styling MOBILE NAVBAR IMPROVEMENTS: - Removed hamburger menu X animation - menu now fades out when opened - Hamburger menu returns when BACK button is clicked - Updated mobile menu positioning and spacing adjustments - Centered all navigation text and removed bullet points - Added grayscale filter to register button image (50% saturation) - Adjusted nav container padding for better layout Mobile Menu Dividers: - Added decorative line SVG dividers between menu items - Implemented pencil-mark effect with gradient fade on both ends - Rotated middle line 180 degrees for visual variation - Lines stretch full width with 2px height using preserveAspectRatio="none" DESKTOP HEADER ENHANCEMENTS: - Replaced diamond (◆) symbols with custom tree SVG icons - Added basicTree.svg with proper viewBox for complete tree display - Tree icons sized at h-5 with auto width to preserve aspect ratio - Trees use same color (#3D472C) as navigation text - Enhanced responsive sizing at desktop breakpoints NEW ASSETS: - basicTree.svg: Custom tree icon for navigation separators - line.svg: Hand-drawn style line for mobile menu dividers - Updated MobileHeader.png with brightness filter (1.01) - Updated RegisterButton.png styling TECHNICAL UPDATES: - Enhanced SVG type definitions to support React component imports - Added support for ReactComponent named exports in SVG modules - Applied CSS mask gradients for fade effects on dividers - Optimized mobile menu layout with centered content This commit refines the mobile navigation experience with decorative elements and improves visual consistency across desktop and mobile interfaces.
On mobile, the register button on landing view was positioned on the left side, making it hard for right-hand thumb to reach over. Moved to the center for easy viewing and reaching from both sides. Changes: - Centered register button container with flex justify-center - Made button span full viewport width for proper centering - Increased button width from px-6 to px-20 for larger tap target - Changed initial state to solid background (bg-[#575f49]) for prominence - Added Framer Motion animations for interactive feedback: * whileHover: scales to 105% * whileTap: scales to 95% * Spring transition for smooth, responsive feel This improves mobile UX by placing the most important CTA in an ergonomic position accessible from both left and right hand thumb zones.
nhuvann
approved these changes
Jan 21, 2026
Collaborator
nhuvann
left a comment
nhuvann
left a comment
There was a problem hiding this comment.
Tested. Merge to Deployment.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Complete redesign of the mobile navigation menu with modern animations and enhanced desktop header responsiveness across all screen sizes.
Mobile Navbar Enhancements
Layout & Positioning
top-0on mobile for better screen utilizationtop-4 right-4with 260px widthVisual Design
Animations
Desktop Header Improvements
Responsive Breakpoints (CSS-based)
Typography & Spacing
md:text-lg→lg:text-xlpx-3→md:px-4→lg:px-6Technical Improvements
Test Plan