CCExtractor / CCExtractor/ccsync

Implement Auto-Hiding Navbar with Scroll Detection

Aperta
#440 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
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:

Image
Image

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.