feat: Implement auto-hiding navbar with scroll detection #452
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
- Add useAutoHidingNavbar hook for scroll behavior detection - Hide navbar after scrolling down 100px, show on scroll up - Always visible when scroll position < 10px - Smooth CSS transform animations (300ms duration) - Fixed positioning with proper z-index - Add scroll-mt-16 to anchored sections for proper offset - Add content padding to prevent navbar overlap - Update both Home and Landing page navbars Closes CCExtractor#440
|
Thank you for opening this PR! Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools. Please take a moment to:
More information on how to conduct a self review: This helps make the review process smoother and gives us a clearer understanding of your thought process. Once you've added your self-review, we'll continue from our side. Thank you! |
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.
Implements auto-hiding navbar functionality that provides users with more screen real estate while maintaining intuitive navigation access.
Problem
The navbar remained constantly visible, taking up valuable screen space and reducing content visibility during scrolling sessions.
Solution
Smart scroll detection: Hides navbar after scrolling down 100px, shows immediately on scroll up
Always visible near top: Navbar stays visible when scroll position < 10px
Smooth animations: 300ms CSS transform transitions without layout shifts
Fixed positioning: Consistent navbar placement across all pages
Proper scroll offsets: Anchored sections account for navbar height
Changes Made
New hook: useAutoHidingNavbar.ts for reusable scroll detection logic
Updated navbars: Both Home and Landing page navbars with auto-hide behavior
Layout fixes: Added scroll-mt-16 to anchored sections and pt-16 content padding
Transform animations: Smooth slide-up/down using CSS transforms
Files Modified
frontend/src/hooks/useAutoHidingNavbar.ts (new)
frontend/src/components/HomeComponents/Navbar/Navbar.tsx
frontend/src/components/LandingComponents/Navbar/Navbar.tsx
frontend/src/components/HomePage.tsx
frontend/src/components/LandingPage.tsx
frontend/src/components/LandingComponents/About/About.tsx
frontend/src/components/LandingComponents/Contact/Contact.tsx
frontend/src/components/LandingComponents/FAQ/FAQ.tsx
frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
Testing Instructions
Page load - Navbar should be visible at top
Scroll down - Navbar hides after 100px scroll
Scroll up - Navbar appears immediately
Anchor links - Content appears below navbar without overlap
Mobile viewport - Test responsive behavior
Rapid scrolling - Verify smooth animations
UX Benefits
64px additional content space when scrolling
Intuitive navigation access when needed
Smooth, jarring-free interactions
Better content focus during reading