Implement Auto-Hiding Navbar with Scroll Detection

[HarshRaj29004]

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:

[its-me-abhishek]

@HarshRaj29004 the navbar already seems to get scrolled up, once on HomePage, is this related to some browser related issue?

[HarshRaj29004]

@its-me-abhishek This is not a browser issue, actually a feature proposal to improve navbar accessibility and overall UX. The video below demonstrates the expected behavior:
https://github.com/user-attachments/assets/f8012c1a-c0a1-4cdc-8f68-df29439da128