CCExtractor / CCExtractor/ccsync

Implement Auto-Hiding Navbar with Scroll Detection

Aberta
#440 3 comentários 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
TypeScript
Estrelas
37
Forks
76
Merge médio
3d 7h
PRs com merge (30d)
2

Descrição

**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

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.