Collapse ReadMe Reference Doc Header Sections

collapse-header.js

function bindSidebarHeadingToggles(root) {
  const container = root || document;
  const sections = container.querySelectorAll('.rm-Sidebar-section');

  sections.forEach(section => {
    const heading = section.querySelector(':scope > .rm-Sidebar-heading');
    const list = section.querySelector(':scope > ul.rm-Sidebar-list');
    if (!heading || !list) return;

    // Skip if this <h2> already contains a <button> (native toggle)
    if (heading.querySelector('button')) return;

    if (heading.dataset.ulToggleAttached === 'true') return;
    heading.dataset.ulToggleAttached = 'true';

    // Create arrow if missing
    let arrow = heading.querySelector('.sidebar-toggle-arrow');
    if (!arrow) {
      arrow = document.createElement('span');
      arrow.className = 'sidebar-toggle-arrow';
      arrow.innerHTML = '▶'; // simple chevron
      arrow.style.display = 'inline-block';
      arrow.style.marginLeft = '0.5em';
      arrow.style.transition = 'transform 0.2s ease';
      heading.appendChild(arrow);
    }

    // Force closed on load
    list.style.display = 'none';
    heading.setAttribute('aria-expanded', 'false');
    arrow.style.transform = 'rotate(0deg)';

    // Toggle on click
    heading.addEventListener('click', () => {
      const currentlyHidden = getComputedStyle(list).display === 'none';
      if (currentlyHidden) {
        list.style.display = '';
        heading.setAttribute('aria-expanded', 'true');
        arrow.style.transform = 'rotate(90deg)';
      } else {
        list.style.display = 'none';
        heading.setAttribute('aria-expanded', 'false');
        arrow.style.transform = 'rotate(0deg)';
      }
    });
  });
}

function applySidebarToggles() {
  bindSidebarHeadingToggles(document);
}

$(window).on('pageLoad', () => {
  applySidebarToggles();
});

(function setupSidebarObserver() {
  let debounceId = null;
  const observer = new MutationObserver((mutations) => {
    const touched = mutations.some(m => {
      return [...m.addedNodes, ...m.removedNodes].some(n =>
        n.nodeType === 1 && (n.id === 'hub-sidebar' || n.closest?.('#hub-sidebar'))
      );
    });
    if (!touched) return;

    clearTimeout(debounceId);
    debounceId = setTimeout(applySidebarToggles, 80);
  });
  observer.observe(document.body, { childList: true, subtree: true });
})();