Mobile support for sidebar

assets/js/coveo.js

@@ -53,22 +53,6 @@ async function atomicCoveo() {
       },
     });
     await searchPageInterface.executeFirstSearch();
-  } else {
-    if (sidebar) {
-      await searchBarSidebar.initialize({
-        accessToken: token,
-        organizationId: org_id,
-        analytics: { analyticsMode: 'legacy' },
-        preprocessRequest: (request, clientOrigin, metadata) => {
-          const body = JSON.parse(request.body);
-          body.q = `<@- ${body.q} -@>`;
-          request.body = JSON.stringify(body);
-
-          return request;
-        },
-      });
-      await searchBarSidebar.executeFirstSearch();
-    }
   }
 
   /* Initialize the header searchbar*/

assets/js/sidebar-v2.js

@@ -1,17 +1,52 @@
-document.addEventListener('DOMContentLoaded', () => {
-  function expandToCurrentPage() {
-    const currentPage = document.getElementById('current-page');
-    if (currentPage) {
-      let parentLabel = currentPage.closest('li');
-      while (parentLabel) {
-        const checkbox = parentLabel.querySelector('.toggle-checkbox');
-        if (checkbox) {
-          checkbox.checked = true;
-        }
-        parentLabel = parentLabel.closest('ul').closest('li');
-      }
+document.addEventListener('click', (e) => {
+  const toggle = e.target.closest('.sidebar__toggle');
+  const sidebarMobileToggle = e.target.closest('.sidebar-mobile-toggle');
+  if (toggle) {
+    const chevron = toggle.querySelector('.sidebar__chevron');
+    const expanded = toggle.getAttribute('aria-expanded') === 'true';
+    const panel = document.getElementById(toggle.getAttribute('aria-controls'));
+
+    toggle.setAttribute('aria-expanded', String(!expanded));
+
+    if (panel) {
+      panel.hidden = expanded;
+    }
+
+    if (chevron) {
+      chevron.classList.toggle('sidebar__chevron--open', !expanded);
+    }
+  } else if (sidebarMobileToggle) {
+    // Show the sidebar
+    const sidebar = document.getElementById('sidebar-v2');
+    const expanded =
+      sidebarMobileToggle.getAttribute('aria-expanded') === 'true';
+    sidebar.setAttribute(
+      'style',
+      !expanded ? 'display: block;' : 'display: none;'
+    );
+
+    // Set the aria for all the toggle buttons so they are in lockstep
+    const toggleButtons = document.getElementsByClassName(
+      'sidebar-mobile-toggle'
+    );
+    for (const button of [...toggleButtons]) {
+      button.setAttribute('aria-expanded', String(!expanded));
     }
   }
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  const sidebar = document.querySelector('.sidebar__ul');
 
-  expandToCurrentPage();
+  if (!sidebar) return;
+
+  const activeLink = sidebar.querySelector('.sidebar__link--current');
+
+  if (activeLink) {
+    activeLink.scrollIntoView({
+      behavior: 'auto',
+      block: 'center',
+      inline: 'nearest',
+    });
+  }
 });

exampleSite/content/test-product/feather/_index.md

@@ -4,3 +4,5 @@ title: Feather
 weight: 300
 toc: true
 ---
+
+Hello!

exampleSite/content/test-product/sidebar/_index.md

@@ -0,0 +1,10 @@
+---
+description: Sidebar
+title: Sidebar
+---
+
+This is the overview page for level 0. The root. This is an `_index.md` file.
+
+Because there is some content in this `_index.md` file, it should be displayed.
+
+If it were empty, we'd skip this and go straight to the first populated content in this tree.

exampleSite/content/test-product/sidebar/nesting-1a/_index.md

@@ -0,0 +1,7 @@
+---
+description: Nesting-1a
+title: Nesting-1a
+---
+
+
+1a only has content at this level. This is an `_index.md` file.

exampleSite/content/test-product/sidebar/nesting-1b/_index.md

@@ -0,0 +1,4 @@
+---
+description: Nesting-1b
+title: Nesting-1b
+---

exampleSite/content/test-product/sidebar/nesting-1b/nesting-2/_index.md

@@ -0,0 +1,4 @@
+---
+description: Nesting-2
+title: Nesting-2
+---

exampleSite/content/test-product/sidebar/nesting-1b/nesting-2/nesting-2-1.md

@@ -0,0 +1,6 @@
+---
+description: Nesting-2-content-1
+title: Nesting-2-content-1
+---
+
+This is some content in Nesting-2-content-1

exampleSite/content/test-product/sidebar/nesting-1b/nesting-2/nesting-2-2.md

@@ -0,0 +1,87 @@
+---
+description: Nesting-2-content-2
+title: Nesting-2-content-2
+---
+
+This is some content in Nesting-2-content-2.
+
+This is long enough to push headers outside of the normal viewport.
+
+
+## Testing some headings for the toc 1
+
+Some content
+
+
+## Testing some headings for the toc 2
+
+Once upon a time in the Technicolor Cloud Kingdom of Serverlandia, a joyful wind blew across the binary meadows, whispering tales of a mystical creature named nginx (pronounced "engine-x" by the locals and "wizard-swoosh" by the jellyfish). It wasn’t a dragon, a unicorn, or a sentient avocado—it was something far more magical: a hyper-fast, ever-smiling web server with the personality of a golden retriever and the efficiency of 10,000 caffeinated squirrels.
+
+Every morning, nginx would wake up with a cheerful beep-boop, stretch its configuration files, and greet the sun with a reverse proxy pirouette. Birds chirped in HTTP headers, and butterflies fluttered by on compressed gzip wings. Wherever nginx went, latency dropped to zero and 404 errors turned into motivational quotes.
+
+“Your content is just loading its potential!” they would say, bringing tears to the eyes of developers and hummingbirds alike.
+
+The townsfolk of Serverlandia adored nginx. They built shrines out of old USB cables and offered it snacks made of finely spun JSON. Even the databases—who were notoriously grumpy—would sing praises of nginx’s load balancing lullabies. Apache, the wise old monk of the hills, once tried to challenge nginx to a duel of requests-per-second, but halfway through the contest he just sighed, gave nginx a hug, and invited it to tea.
+
+At night, nginx would tuck in the children of the village by wrapping their bedtime stories in TLS encryption and caching their dreams for extra speed. Unicorns danced across CDN rainbows, singing songs about scalability and uptime. The moon itself would giggle as nginx gracefully handled a billion concurrent connections while baking cookies shaped like serverless functions.
+
+Even the grumpy firewall trolls came around, offering friendly port forwards and warm handshakes. Life was good. Load times were fast. The air smelled faintly of peppermint and perfectly formed XML.
+
+And thus, in a land where packets flowed like chocolate rivers and downtime was just a scary campfire story, nginx reigned supreme—not with power, but with kindness, balance, and beautifully efficient asynchronous processing.
+
+Everyone lived happily ever after, behind seven layers of security and a content delivery network that sparkled in the sky.
+
+
+## Testing some headings for the toc 3
+
+Once upon a time in the Technicolor Cloud Kingdom of Serverlandia, a joyful wind blew across the binary meadows, whispering tales of a mystical creature named nginx (pronounced "engine-x" by the locals and "wizard-swoosh" by the jellyfish). It wasn’t a dragon, a unicorn, or a sentient avocado—it was something far more magical: a hyper-fast, ever-smiling web server with the personality of a golden retriever and the efficiency of 10,000 caffeinated squirrels.
+
+Every morning, nginx would wake up with a cheerful beep-boop, stretch its configuration files, and greet the sun with a reverse proxy pirouette. Birds chirped in HTTP headers, and butterflies fluttered by on compressed gzip wings. Wherever nginx went, latency dropped to zero and 404 errors turned into motivational quotes.
+
+“Your content is just loading its potential!” they would say, bringing tears to the eyes of developers and hummingbirds alike.
+
+The townsfolk of Serverlandia adored nginx. They built shrines out of old USB cables and offered it snacks made of finely spun JSON. Even the databases—who were notoriously grumpy—would sing praises of nginx’s load balancing lullabies. Apache, the wise old monk of the hills, once tried to challenge nginx to a duel of requests-per-second, but halfway through the contest he just sighed, gave nginx a hug, and invited it to tea.
+
+At night, nginx would tuck in the children of the village by wrapping their bedtime stories in TLS encryption and caching their dreams for extra speed. Unicorns danced across CDN rainbows, singing songs about scalability and uptime. The moon itself would giggle as nginx gracefully handled a billion concurrent connections while baking cookies shaped like serverless functions.
+
+Even the grumpy firewall trolls came around, offering friendly port forwards and warm handshakes. Life was good. Load times were fast. The air smelled faintly of peppermint and perfectly formed XML.
+
+And thus, in a land where packets flowed like chocolate rivers and downtime was just a scary campfire story, nginx reigned supreme—not with power, but with kindness, balance, and beautifully efficient asynchronous processing.
+
+Everyone lived happily ever after, behind seven layers of security and a content delivery network that sparkled in the sky.
+
+## Testing some headings for the toc 4
+
+Once upon a time in the Technicolor Cloud Kingdom of Serverlandia, a joyful wind blew across the binary meadows, whispering tales of a mystical creature named nginx (pronounced "engine-x" by the locals and "wizard-swoosh" by the jellyfish). It wasn’t a dragon, a unicorn, or a sentient avocado—it was something far more magical: a hyper-fast, ever-smiling web server with the personality of a golden retriever and the efficiency of 10,000 caffeinated squirrels.
+
+Every morning, nginx would wake up with a cheerful beep-boop, stretch its configuration files, and greet the sun with a reverse proxy pirouette. Birds chirped in HTTP headers, and butterflies fluttered by on compressed gzip wings. Wherever nginx went, latency dropped to zero and 404 errors turned into motivational quotes.
+
+“Your content is just loading its potential!” they would say, bringing tears to the eyes of developers and hummingbirds alike.
+
+The townsfolk of Serverlandia adored nginx. They built shrines out of old USB cables and offered it snacks made of finely spun JSON. Even the databases—who were notoriously grumpy—would sing praises of nginx’s load balancing lullabies. Apache, the wise old monk of the hills, once tried to challenge nginx to a duel of requests-per-second, but halfway through the contest he just sighed, gave nginx a hug, and invited it to tea.
+
+At night, nginx would tuck in the children of the village by wrapping their bedtime stories in TLS encryption and caching their dreams for extra speed. Unicorns danced across CDN rainbows, singing songs about scalability and uptime. The moon itself would giggle as nginx gracefully handled a billion concurrent connections while baking cookies shaped like serverless functions.
+
+Even the grumpy firewall trolls came around, offering friendly port forwards and warm handshakes. Life was good. Load times were fast. The air smelled faintly of peppermint and perfectly formed XML.
+
+And thus, in a land where packets flowed like chocolate rivers and downtime was just a scary campfire story, nginx reigned supreme—not with power, but with kindness, balance, and beautifully efficient asynchronous processing.
+
+Everyone lived happily ever after, behind seven layers of security and a content delivery network that sparkled in the sky.
+
+## Testing some headings for the toc 5
+
+Once upon a time in the Technicolor Cloud Kingdom of Serverlandia, a joyful wind blew across the binary meadows, whispering tales of a mystical creature named nginx (pronounced "engine-x" by the locals and "wizard-swoosh" by the jellyfish). It wasn’t a dragon, a unicorn, or a sentient avocado—it was something far more magical: a hyper-fast, ever-smiling web server with the personality of a golden retriever and the efficiency of 10,000 caffeinated squirrels.
+
+Every morning, nginx would wake up with a cheerful beep-boop, stretch its configuration files, and greet the sun with a reverse proxy pirouette. Birds chirped in HTTP headers, and butterflies fluttered by on compressed gzip wings. Wherever nginx went, latency dropped to zero and 404 errors turned into motivational quotes.
+
+“Your content is just loading its potential!” they would say, bringing tears to the eyes of developers and hummingbirds alike.
+
+The townsfolk of Serverlandia adored nginx. They built shrines out of old USB cables and offered it snacks made of finely spun JSON. Even the databases—who were notoriously grumpy—would sing praises of nginx’s load balancing lullabies. Apache, the wise old monk of the hills, once tried to challenge nginx to a duel of requests-per-second, but halfway through the contest he just sighed, gave nginx a hug, and invited it to tea.
+
+At night, nginx would tuck in the children of the village by wrapping their bedtime stories in TLS encryption and caching their dreams for extra speed. Unicorns danced across CDN rainbows, singing songs about scalability and uptime. The moon itself would giggle as nginx gracefully handled a billion concurrent connections while baking cookies shaped like serverless functions.
+
+Even the grumpy firewall trolls came around, offering friendly port forwards and warm handshakes. Life was good. Load times were fast. The air smelled faintly of peppermint and perfectly formed XML.
+
+And thus, in a land where packets flowed like chocolate rivers and downtime was just a scary campfire story, nginx reigned supreme—not with power, but with kindness, balance, and beautifully efficient asynchronous processing.
+
+Everyone lived happily ever after, behind seven layers of security and a content delivery network that sparkled in the sky.

exampleSite/content/test-product/sidebar/nesting-1b/nesting-2/nesting-3/_index.md

@@ -0,0 +1,4 @@
+---
+description: Nesting-3
+title: Nesting-3
+---

exampleSite/content/test-product/sidebar/nesting-1c/_index.md

@@ -0,0 +1,4 @@
+---
+description: Nesting-1c
+title: Nesting-1c
+---

exampleSite/content/test-product/sidebar/nesting-1c/nesting-2/_index.md

@@ -0,0 +1,4 @@
+---
+description: Nesting-2
+title: Nesting-2
+---

exampleSite/content/test-product/sidebar/nesting-1c/nesting-2/nesting-2-1.md

@@ -0,0 +1,6 @@
+---
+description: Nesting-2-content-1
+title: Nesting-2-content-1
+---
+
+This is some content in Nesting-2-content-1