Added scroll based menu highlight feature

[Tiru-99]

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)
}

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-hook-form-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 19, 2024 5:37am