https://www.ruby-lang.org/javascripts/navigation-toggle.js

1// Navigation and TOC toggle functionality
2(function() {
3  'use strict';
4
5  // Navigation toggle
6  const navToggle = document.getElementById('nav-toggle');
7  const navMobilePanel = document.getElementById('nav-mobile-panel');
8  const navChevron = document.getElementById('nav-chevron');
9  const navSectionTitle = document.getElementById('nav-section-title');
10
11  if (navToggle && navMobilePanel) {
12    // Get the section title from the navigation content
13    if (navSectionTitle) {
14      const titleElement = navMobilePanel.querySelector('h3');
15      if (titleElement) {
16        navSectionTitle.textContent = titleElement.textContent;
17      }
18    }
19
20    navToggle.addEventListener('click', function() {
21      const isHidden = navMobilePanel.classList.toggle('hidden');
22
23      // Rotate chevron icon
24      if (navChevron) {
25        if (isHidden) {
26          navChevron.style.transform = 'rotate(0deg)';
27        } else {
28          navChevron.style.transform = 'rotate(180deg)';
29        }
30      }
31    });
32  }
33
34  // TOC toggle
35  const tocToggle = document.getElementById('toc-toggle');
36  const tocMobilePanel = document.getElementById('toc-mobile-panel');
37  const tocChevron = document.getElementById('toc-chevron');
38
39  if (tocToggle && tocMobilePanel) {
40    tocToggle.addEventListener('click', function() {
41      const isHidden = tocMobilePanel.classList.toggle('hidden');
42
43      // Rotate chevron icon
44      if (tocChevron) {
45        if (isHidden) {
46          tocChevron.style.transform = 'rotate(0deg)';
47        } else {
48          tocChevron.style.transform = 'rotate(180deg)';
49        }
50      }
51    });
52  }
53
54  // Close on Escape key
55  document.addEventListener('keydown', function(e) {
56    if (e.key === 'Escape') {
57      if (navMobilePanel && !navMobilePanel.classList.contains('hidden')) {
58        navMobilePanel.classList.add('hidden');
59        // Reset chevron when closed
60        if (navChevron) {
61          navChevron.style.transform = 'rotate(0deg)';
62        }
63      }
64      if (tocMobilePanel && !tocMobilePanel.classList.contains('hidden')) {
65        tocMobilePanel.classList.add('hidden');
66        // Reset chevron when closed
67        if (tocChevron) {
68          tocChevron.style.transform = 'rotate(0deg)';
69        }
70      }
71    }
72  });
73})();