CCExtractor / CCExtractor/ccsync
Implement Auto-Hiding Navbar with Scroll Detection
- Lingua principale
- TypeScript
- Stelle
- 37
- Fork
- 76
- Merge medio
- 3g 7h
- PR unite (30g)
- 2
Descrizione
**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:
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia leggendo frontend/src/components/HomeComponents/Navbar/Navbar.tsx e frontend/src/components/HomePage.tsx, quindi esegui i controlli frontend esistenti o l’app per esaminare il comportamento attuale dello scorrimento e degli anchor. Il lavoro è completato quando la navbar rimane visibile in alto, si nasconde dopo uno scorrimento verso il basso oltre 100px, riappare durante lo scorrimento verso l’alto, si anima fluidamente e i link delle sezioni rimangono posizionati correttamente sotto di essa.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 45/100