CCExtractor / CCExtractor/ccsync
Implement Auto-Hiding Navbar with Scroll Detection
- Vorherrschende Sprache
- TypeScript
- Sterne
- 37
- Forks
- 76
- Ø Merge
- 3 T. 7 Std.
- Gemergte PRs (30 T.)
- 2
Beschreibung
**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:
Beitragsleitfaden
Rechercherichtung
Beginne damit, frontend/src/components/HomeComponents/Navbar/Navbar.tsx und frontend/src/components/HomePage.tsx zu lesen, und führe dann die vorhandenen frontend-Prüfungen oder die App aus, um das aktuelle Scroll- und Ankerverhalten zu untersuchen. Als erledigt gilt die Aufgabe, wenn die Navbar oben sichtbar bleibt, nach dem Herunterscrollen über 100px ausgeblendet wird, beim Hochscrollen wieder erscheint, sich gleichmäßig animiert und die Abschnittslinks weiterhin korrekt unterhalb der Navbar positioniert sind.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 45/100