add functionality and styles for toggling page content

material-overrides/assets/stylesheets/polkadot.css

@@ -770,6 +770,10 @@ input.md-search__input::placeholder {
     margin-top: 1em;
   }
 
+  .md-nav--primary .md-nav--secondary .md-nav__list {
+    margin-top: 0;
+  }
+
   .md-nav--primary .md-nav__title .md-nav__icon {
     position: unset;
     display: flex;
@@ -817,6 +821,7 @@ input.md-search__input::placeholder {
 
   .md-nav--primary .md-nav__title ~ .md-nav__list[data-md-component="toc"] {
     padding-top: 0;
+    margin-top: 1em;
   }
 
   .md-nav--primary .md-nav__item {
@@ -1001,6 +1006,18 @@ input.md-search__input::placeholder {
     margin-left: auto;
     height: fit-content;
   }
+
+  .md-main__inner {
+    margin-top: 1rem;
+  }
+
+  .md-container {
+    padding: 0 1rem;
+  }
+
+  .md-content__inner {
+    margin-right: 0;
+  }
 }
 
 article.md-content__inner.md-typeset > h1:has(+ .badge) {
@@ -1376,7 +1393,6 @@ details.interface > summary::before {
   border-bottom-right-radius: 16px;
 }
 
-.md-typeset .tabbed-labels > label,
 .md-typeset .tabbed-labels > label > [href]:first-child,
 .md-typeset .tabbed-labels > label > a > code {
   color: var(--white);
@@ -1391,10 +1407,6 @@ details.interface > summary::before {
   height: 4px;
 }
 
-.md-typeset .tabbed-labels > label:hover {
-  color: var(--white);
-}
-
 /* Add margin to all items nested inside a tabbed element */
 .md-typeset .tabbed-block > *,
 /* Need this line to override inline styling */

material-overrides/assets/stylesheets/toggle-page.css

@@ -0,0 +1,98 @@
+/** Page-level toggle **/
+.h1-wrapper {
+  display: flex;
+  gap: 3em;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 1.25em;
+}
+
+.md-typeset .h1-wrapper h1 {
+  margin: 0;
+}
+
+/* Make the labels container look like a pill toggle */
+.js .md-typeset .h1-wrapper .tabbed-labels {
+  position: relative;
+  background: var(--athens-gray);
+  border-radius: 2em;
+  width: fit-content;
+  min-width: 132px;
+  height: min-content;
+}
+
+.md-typeset .h1-wrapper .tabbed-labels > label {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  z-index: 1;
+  padding: 0.5em 1em;
+}
+
+.md-typeset .h1-wrapper .tabbed-labels > label > [href]:first-child,
+.md-typeset .h1-wrapper .tabbed-labels > label a {
+  color: var(--black);
+  text-decoration: none;
+  display: block;
+}
+
+/* Slider background */
+.js .md-typeset .h1-wrapper .tabbed-labels:before {
+  content: "";
+  position: absolute;
+  top: 0.2em;
+  left: 0.2em;
+  width: calc(50% - 0.2em);
+  height: calc(100% - 0.4em);
+  background: var(--pink);
+  border-radius: 2em;
+  transition: transform 0.3s ease;
+  z-index: 0;
+}
+
+.js .md-typeset .h1-wrapper .tabbed-labels.option-2-active::before {
+  transform: translateX(100%);
+}
+
+.js .md-typeset .h1-wrapper .tabbed-labels.option-1-active::before {
+  transform: translateX(0);
+}
+
+.js .md-typeset .h1-wrapper .tabbed-labels.option-1-active label:nth-child(1) a,
+.js
+  .md-typeset
+  .h1-wrapper
+  .tabbed-labels.option-2-active
+  label:nth-child(2)
+  a {
+  color: var(--md-default-bg-color);
+}
+
+.md-typeset .page-level-options > .tabbed-content {
+  border: none;
+  border-radius: unset;
+  margin-top: -1em;
+}
+
+.md-typeset .page-level-options .tabbed-block > *,
+.md-typeset .page-level-options .tabbed-block > .tabbed-set {
+  margin-left: unset;
+  margin-right: unset;
+}
+
+.md-typeset .page-toggle .tabbed-set,
+.md-typeset .page-level-options .tabbed-block h1 {
+  margin-top: 0;
+}
+
+.hidden-toc {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .h1-wrapper {
+    flex-direction: column-reverse;
+    flex-wrap: wrap;
+    gap: 1em;
+  }
+}

material-overrides/toggle-page.html

@@ -0,0 +1,101 @@
+{% extends "main.html" %}
+
+{% block styles %}
+	{{ super() }}
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/toggle-page.css' | url }}">
+{% endblock %}
+
+{% block content %}
+  <div class="page-toggle">
+    {% set content = page.content %}
+    {# Create wrapper for the h1 #}
+    {% if '<h1' in content %}
+      {% set content = content.replace('<h1', '<div class="h1-wrapper"><h1', 1) %}
+      {% set content = content.replace('</h1>', '</h1></div>', 1) %}
+    {% endif %}
+
+    {# Find and move the first tabbed-labels div into the h1-wrapper #}
+    {% if 'class="tabbed-labels"' in content %}
+      {% set labels_start = content.find('<div class="tabbed-labels"') %}
+      {% if labels_start != -1 %}
+        {% set after_start = content[labels_start:] %}
+        {% set first_close = after_start.find('</div>') %}
+        {% if first_close != -1 %}
+          {% set labels_end = labels_start + first_close + 6 %}
+          {% set before_labels = content[:labels_start] %}
+          {% set labels_div = content[labels_start:labels_end] %}
+          {% set after_labels = content[labels_end:] %}
+
+          {# Remove the labels div from its original position #}
+          {% set content_without_labels = before_labels + after_labels %}
+
+          {# Find the h1-wrapper closing div and insert labels before it #}
+          {% if '</div>' in content_without_labels %}
+            {% set wrapper_close_pos = content_without_labels.find('</div>') %}
+            {% set before_wrapper_close = content_without_labels[:wrapper_close_pos] %}
+            {% set after_wrapper_close = content_without_labels[wrapper_close_pos:] %}
+            {% set content = before_wrapper_close + labels_div + after_wrapper_close %}
+          {% endif %}
+        {% endif %}
+      {% endif %}
+    {% endif %}
+
+    {{ content | safe }}
+  </div>
+{% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const tabbedSet = document.querySelector('.tabbed-set');
+      if (!tabbedSet) return;
+
+      tabbedSet.classList.add('page-level-options');
+
+      const inputs = tabbedSet.querySelectorAll('input[name="__tabbed_1"]');
+      const labels = document.querySelector('.tabbed-labels');
+      const tocItems = document.querySelectorAll('.md-nav--secondary .md-nav__item');
+
+      // Update TOC visibility based on active tab
+      const updateToc = () => {
+        const tabbedBlocks = tabbedSet.querySelectorAll(':scope > .tabbed-content > .tabbed-block');
+
+        tabbedBlocks.forEach((block) => {
+          const isHidden = window.getComputedStyle(block).display === 'none';
+          const h2s = block.querySelectorAll('h2');
+
+          h2s.forEach((h2) => {
+            const id = h2.id;
+            if (!id) return;
+            tocItems.forEach((item) => {
+              const link = item.querySelector('.md-nav__link');
+              if (!link?.href.includes(id)) return;
+              item.classList.toggle('hidden-toc', isHidden);
+            });
+          });
+        });
+      };
+
+      // Update tab label states
+      const updateLabels = () => {
+        if (labels) {
+          labels.classList.toggle('option-1-active', inputs[0]?.checked);
+          labels.classList.toggle('option-2-active', inputs[1]?.checked);
+        }
+      };
+
+      // Initialize
+      updateToc();
+      updateLabels();
+
+      // Watch for changes
+      inputs.forEach((input) =>
+        input.addEventListener('change', () => {
+          updateLabels();
+          updateToc();
+        })
+      );
+    });
+  </script>
+{% endblock %}