Make navbar sticky under header when scroll. Add useElementHeight Hook

[Linn-Devoteam]

Pull Request

Description

This PR makes the navbar sticky under the header when scrolling. It adds useElementHeight to get the header height dynamically, making the behavior stable and responsive.

• Added useElementHeight hook to measure header height dynamically using ResizeObserver.
• Updated Tabs → forwards offset prop to S.Bar for sticky positioning.
• Refactored S.Bar to use top: ${({ offset }) => offset}px instead of hardcoded value.
• Ensures navbar always sticks directly under the header on both desktop and mobile.

How to test

1. Install and start the project:

   • npm install
   • npm run dev

2. Open local host

   • Resize the browser window to a smaller height and scroll down.
   • Verify that the navbar sticks directly under the header.
   • Repeat the same test in mobile view (browser dev tools or real device).

Type of Change

• feature: New feature
• chore: Maintenance, dependency updates, or refactoring
• test: Adding or improving tests
• bug: Bug fix
• docs: Documentation updates
• Other (please specify):

Shortcut story

https://trello.com/c/d4b6xYI6/22-bug-text-shown-under-header-when-scrolling-on-page

Related Issues

Testing Performed

• Unit tests added/updated
• Integration tests added/updated
• Manual testing performed

Screenshots/Recordings

Checklist

• My code follows the project's coding style guidelines
• I have updated the documentation accordingly
• I have added tests that prove my fix/feature works
• All existing and new tests pass
• I have checked for and resolved any merge conflicts
• I have made corresponding changes to the README (if applicable)

Additional Notes

[geraldhoxha]

Very nice idea :) An issue though, when the page is too long and start scrolling beyond the "Components" section, the nav is pushed up while the tabs are sticky