CCExtractor / CCExtractor/ccsync
Implement Auto-Hiding Navbar with Scroll Detection
- Langage dominant
- TypeScript
- Étoiles
- 37
- Forks
- 76
- Merge moyen
- 3 j 7 h
- PR mergées (30 j)
- 2
Description
**Is your feature request related to a problem? Please describe.**
When using the application, the navbar remains fixed at the top of the screen at all times, consuming valuable vertical space. This is particularly noticeable when:
- Reading through long task lists
- Viewing content on smaller screens or mobile devices
- Scrolling through the setup guide or FAQ sections
Users lose approximately 56-64 pixels of vertical space that could be used to display more content, especially critical in task management views where seeing more tasks at once improves productivity.
**Describe the solution you'd like**
Implement an intelligent auto-hiding navbar that:
1. **Hides on scroll down**: When the user scrolls down (after 100px), the navbar smoothly slides up and out of view, maximizing screen real estate for content
2. **Shows on scroll up**: When the user scrolls up at any point, the navbar immediately reappears, ensuring easy access to navigation
3. **Always visible at top**: When at the very top of the page (< 10px), the navbar remains visible
4. **Smooth animations**: Uses CSS transitions for a polished, professional feel (300ms duration)
5. **Proper scroll anchoring**: All section links properly account for the navbar height when scrolling to anchored content using `scroll-mt-16` utility class
**Technical Implementation:**
- Changed navbar from `sticky` to `fixed` positioning
- Added scroll event listener with state management (React hooks)
- Implemented `translate-y-0` / `-translate-y-full` CSS transforms
- Maintains existing smooth scroll behavior defined in global CSS
**Describe alternatives you've considered**
1. **Fully static navbar**: Keep the navbar always visible (current implementation)
2. **Collapse on mobile only**: Auto-hide only on smaller screens
3. **Hamburger menu only**: Hide all navbar content behind a menu button
4. **Delay-based auto-hide**: Hide after X seconds of inactivity
**Additional context**
### Benefits:
- **Improved UX**: More screen space for content without sacrificing navigation access
- **Better mobile experience**: Critical on smaller screens where vertical space is limited
### Implementation Details:
**Files Modified:**
- `frontend/src/components/HomeComponents/Navbar/Navbar.tsx`: Added scroll detection logic and transform animations
- `frontend/src/components/HomePage.tsx`: Added `scroll-mt-16` classes to section anchors
### Screenshots/Demo:
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.