CCExtractor / CCExtractor/ccsync

Implement Auto-Hiding Navbar with Scroll Detection

Offen
#440 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
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:

Image
Image

Beitragsleitfaden

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.