Summary

Add collapse/expand functionality to the page Table of Contents (TOC) sidebar on desktop view, allowing users to maximize article reading space.

Changes

New Files

• ui/src/js/12-toc-collapse.js - TOC collapse/expand functionality
• Creates and injects collapse button into TOC sidebar
• Toggles collapsed state with smooth transitions
• Resets to expanded state on each page load
• Keyboard accessible (Enter/Space key support)
• Desktop only (1200px+)

Modified Files

ui/src/css/toc.css

• Added collapse button styles
  • Sticky positioned on left side of TOC panel
  • Uses existing arrow-back.svg icon
  • Rotates 180° between collapsed/expanded states
  • Includes hover and focus states for accessibility
• Added collapsed state styles
  • TOC collapses to 50px width
  • Content fades out with opacity transition
  • Smooth 0.3s ease transition on width change

ui/src/css/doc.css

• Added article expansion behavior
  • Article max-width increases when TOC collapses
  • Smooth 0.3s ease transition
  • Responsive calculations for both desktop (1200px+) and widescreen (1600px+)
  • Desktop: Article expands by ~215px (888px → 1103px)
  • Widescreen: Article expands by ~424px (888px → 1312px)