Enhanced Side Menu with Active Section Tracking #1083

Overview

This PR implements an enhanced side menu component that automatically highlights the current section as users scroll through the page. The menu now provides visual feedback for navigation, improving the overall user experience in our single-page documentation layout.

Key Changes

Implemented scroll-based active section detection
Added visual highlighting for both parent and child menu items
Introduced smooth scrolling behavior when clicking menu items
Updated styling to support the new interactive features

Implementation Details

Uses useEffect and scroll event listener to track the current section
Calculates section positions dynamically to handle content updates
Implements a 100px offset for better UX when transitioning between sections
Handles both top-level and nested menu items

Execution Video

https://github.com/user-attachments/assets/707c5a0c-22be-4682-a697-1ccae702cf24

Code Example


// Function to determine which section is currently in view
const handleScroll = () => {
//Create an array of all sections with their IDs and positions
  const sections = pages.flatMap(page => 
    [page, ...(page.pages || [])].map(p => ({
      id: p.pathname.replace('#', ''),
      top: document.getElementById(p.pathname.replace('#', ''))?.offsetTop || 0
    }))
  )

//Find the section that's currently in view
  const currentSection = sections.reduce((acc, section) => {
    const { id, top } = section
    if (window.scrollY >= top - 100) {   // 100px offset for better UX
      return id
    }
    return acc
  }, '')

 //Update the state with the current section
  setActiveSection(currentSection)
}

react-hook-form / documentation

Added scroll based menu highlight feature #1085