feat(ui): Implement scroll-aware header with show/hide on scroll

[vellanki-santhosh]

📋 Description

This PR implements a scroll-aware header that automatically hides when scrolling down and reappears when scrolling up, significantly improving the user experience and navigation efficiency.

🎯 Problem Statement

Currently, when scrolling down the page, the header/navigation bar scrolls out of view. To access navigation options again, users need to scroll all the way back to the top, which interrupts the browsing flow—especially on longer pages.

✨ Changes Made

New Files

• packages/ui/src/hooks/useScrollDirection.js: Custom React hook to detect scroll direction and position
  • Tracks scroll direction (up/down)
  • Monitors if user is at the top of the page
  • Uses requestAnimationFrame for optimal performance
  • Implements 5px threshold to prevent jittery behavior

Modified Files

• packages/ui/src/layout/MainLayout/index.jsx: Updated to implement scroll-aware behavior
  • Integrated useScrollDirection hook
  • Added smooth CSS transitions (300ms ease-in-out)
  • Implements translateY(-100%) to hide header on scroll down
  • Shows header when scrolling up or at page top

🚀 Features

• ✅ Scroll-Aware Behavior: Header hides when scrolling down, reappears when scrolling up
• ✅ Performance Optimized: Uses requestAnimationFrame to avoid layout thrashing
• ✅ Smooth Animations: 300ms ease-in-out transition for natural feel
• ✅ Smart Detection: Ignores micro-scrolls with 5px threshold
• ✅ Always Accessible at Top: Header always visible when at page top
• ✅ Responsive Design: Works seamlessly across all device sizes
• ✅ Subtle Shadow: Adds box-shadow when visible for depth

🔧 Technical Implementation

• Uses React Hooks for state management
• GPU-accelerated animations via CSS transform
• Event throttling via requestAnimationFrame
• Material-UI integration for consistent theming
• Zero breaking changes to existing functionality

📱 Testing

• ✅ Desktop (large screens)
• ✅ Tablet (medium screens)
• ✅ Mobile (small screens)
• ✅ All existing responsive behavior preserved

💡 Benefits

1. Better Navigation: Users can access navigation quickly by scrolling up
2. More Screen Space: Content gets full attention when scrolling down
3. Modern UX Pattern: Aligns with contemporary web standards
4. Smooth & Natural: Transitions feel polished and intentional
5. No Disruption: Doesn't interfere with normal scrolling behavior

🎬 Demo

The header will:

• Hide smoothly when scrolling down (after 80px)
• Reappear immediately when scrolling up
• Always stay visible at the top of the page
• Transition with a smooth 300ms animation

📝 Related Issues

Addresses user experience improvement for navigation on long pages.

✅ Checklist

• Code follows project style guidelines
• No breaking changes
• Responsive design maintained
• Performance optimized
• Zero compilation errors
• Works across all screen sizes

[gemini-code-assist]

Summary of Changes

Hello @vellanki-santhosh, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant user experience improvement by implementing a scroll-aware header. Previously, users had to scroll back to the top of a page to access navigation. With this change, the header now intelligently hides when scrolling down, providing more screen real estate for content, and smoothly reappears when scrolling up, allowing quick access to navigation options without interrupting the browsing flow.

Highlights

• New useScrollDirection Hook: A new custom React hook has been implemented to efficiently detect the user's scroll direction (up or down), whether the page is at the top, and to determine if the header should be hidden.
• Scroll-Aware Header Behavior: The main layout's header now intelligently hides when the user scrolls down and smoothly reappears when scrolling up, significantly improving navigation and screen real estate.
• Performance Optimization and Smoothness: The scroll detection utilizes requestAnimationFrame for optimal performance, preventing layout thrashing. Smooth CSS transitions (300ms ease-in-out) are applied for a polished user experience, and a 5px threshold prevents jittery behavior from micro-scrolls.
• Enhanced User Experience: The header remains visible when at the top of the page and includes a subtle box-shadow when visible, aligning with modern UX patterns and ensuring accessibility without disrupting normal scrolling.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a scroll-aware header, which is a great user experience improvement. The implementation is clean, using a new custom hook useScrollDirection to manage the logic and CSS transforms for the animation. My review includes a couple of key suggestions. First, I recommend refactoring the useScrollDirection hook to improve its performance and make it more reusable by avoiding a common useEffect pitfall and parameterizing hardcoded values. Second, I've identified and provided a fix for a small regression in MainLayout where an existing transition was accidentally removed. Overall, this is a solid feature addition.