fix: Fix what the navigation hide interaction affects all pages

[NINE-J]

Related PR

#576

Description

This PR addresses an issue where the sidebar's auto-hide feature (on scroll), introduced in a previous update, was globally affecting pages beyond the Tutorial screen. This led to unintended layout shifts, such as unnecessary margins on other pages.

Technical Considerations & Decision Making

I evaluated two primary approaches to resolve this:

1. Option 1: Hardcoding the hide logic for the Tutorial page only.

   • Pros: Quickest implementation.
   • Cons: High coupling. Any future pages requiring the same interaction would require manual internal component modifications, hindering scalability.

2. Option 2: Enabling the Sidebar component to dynamically determine behavior based on route metadata.

   • Decision: I chose this approach for long-term scalability. By leveraging route meta fields, the Sidebar can independently decide whether to activate the scroll-hide logic based on the current context.

Changes

• Utilizing Vue Router Meta Fields:

  • Added meta: { hideNavOnScroll: true } to the /tutorial route in router/index.js.
  • This ensures extensibility; if other pages need this interaction in the future, it can be enabled simply by adding a single line to the router configuration.

• Performance Optimization (Dynamic Event Listener Allocation):

  • Removed the global scroll listener (handleScroll) that was previously attached upon the Sidebar mounting to prevent unnecessary computation and potential memory leaks.
  • Implemented a router watch to check the meta.hideNavOnScroll value only once during route transitions.
  • The scroll listener is now dynamically attached only when entering designated pages and is immediately cleaned up (removeEventListener) when navigating away to other pages.