feat: add collapsible desktop sidebar

_static/css/rtd_theme_mods.css

@@ -125,3 +125,83 @@ aside.sidebar {
     width: 40%;
     float: right;
 }
+
+/* Desktop sidebar toggle. RTD switches to its mobile navigation at 768px. */
+.wy-breadcrumbs > .desktop-sidebar-toggle-item {
+  display: none;
+}
+
+@media screen and (min-width: 769px) {
+  html.desktop-sidebar-toggle-ready .wy-breadcrumbs > li {
+    vertical-align: middle;
+  }
+
+  html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle-item {
+    position: fixed;
+    top: 1.618em;
+    left: 8px;
+    z-index: 201;
+    display: block;
+    padding: 0;
+    /* Keep the control in the content gutter beside RTD's 300px sidebar. */
+    transform: translateX(300px);
+    transition: transform 0.3s ease;
+  }
+
+  html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle {
+    display: inline-flex;
+    width: 32px;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: #646464;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    transition: color 0.15s ease, background-color 0.15s ease;
+  }
+
+  html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle:hover {
+    background: #eef4f8;
+    color: #2980b9;
+  }
+
+  html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle:focus-visible {
+    outline: 2px solid #2980b9;
+    outline-offset: 2px;
+  }
+
+  html.desktop-sidebar-toggle-ready .wy-nav-side {
+    transition: transform 0.3s ease, visibility 0s linear;
+  }
+
+  html.desktop-sidebar-toggle-ready .wy-nav-content-wrap {
+    transition: margin-left 0.3s ease;
+  }
+
+  html.sidebar-collapsed .wy-nav-side {
+    transform: translateX(-100%);
+    visibility: hidden;
+    transition-delay: 0s, 0.3s;
+  }
+
+  html.sidebar-collapsed .wy-nav-content-wrap {
+    margin-left: 0;
+  }
+
+  html.sidebar-collapsed .desktop-sidebar-toggle-item {
+    transform: translateX(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html.desktop-sidebar-toggle-ready .desktop-sidebar-toggle-item,
+    html.desktop-sidebar-toggle-ready .wy-nav-side,
+    html.desktop-sidebar-toggle-ready .wy-nav-content-wrap {
+      transition: none;
+    }
+  }
+}

_static/js/desktop-sidebar.js

@@ -0,0 +1,47 @@
+(function () {
+  'use strict';
+
+  var storageKey = '7e-sidebar-collapsed';
+  var root = document.documentElement;
+
+  function initializeSidebarToggle() {
+    var toggle = document.querySelector('.desktop-sidebar-toggle');
+    var sidebar = document.querySelector('.wy-nav-side');
+
+    if (!toggle || !sidebar) {
+      return;
+    }
+
+    if (!sidebar.id) {
+      sidebar.id = 'wy-nav-side';
+    }
+    toggle.setAttribute('aria-controls', sidebar.id);
+
+    function updateToggle() {
+      var expanded = !root.classList.contains('sidebar-collapsed');
+      var label = expanded ? 'Hide navigation sidebar' : 'Show navigation sidebar';
+      toggle.setAttribute('aria-expanded', String(expanded));
+      toggle.setAttribute('aria-label', label);
+      toggle.setAttribute('title', label);
+    }
+
+    updateToggle();
+
+    toggle.addEventListener('click', function () {
+      var collapsed = root.classList.toggle('sidebar-collapsed');
+      updateToggle();
+
+      try {
+        window.localStorage.setItem(storageKey, String(collapsed));
+      } catch (error) {
+        // The current page still works if browser storage is unavailable.
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeSidebarToggle, { once: true });
+  } else {
+    initializeSidebarToggle();
+  }
+})();

_templates/breadcrumbs.html

@@ -0,0 +1,11 @@
+{% extends "!breadcrumbs.html" %}
+{% block breadcrumbs %}
+<li class="desktop-sidebar-toggle-item">
+  <button class="desktop-sidebar-toggle" type="button"
+          aria-label="Hide navigation sidebar" aria-expanded="true"
+          aria-controls="wy-nav-side" title="Hide navigation sidebar">
+    <i class="fa fa-bars" aria-hidden="true"></i>
+  </button>
+</li>
+{{ super() }}
+{% endblock %}

_templates/layout.html

@@ -1,4 +1,20 @@
 {% extends "!layout.html" %}
+{% block extrahead %}
+{{ super() }}
+<script>
+(function () {
+  var root = document.documentElement;
+  root.classList.add('desktop-sidebar-toggle-ready');
+  try {
+    if (window.localStorage.getItem('7e-sidebar-collapsed') === 'true') {
+      root.classList.add('sidebar-collapsed');
+    }
+  } catch (error) {
+    // Keep the toggle usable when browser storage is unavailable.
+  }
+})();
+</script>
+{% endblock %}
 {% block navigation %}
 {{ super() }}
 <div class="wy-menu wy-menu-vertical" role="navigation">

conf.py

@@ -134,6 +134,10 @@ def get_version():
     'css/rtd_theme_mods.css',
     ]
 
+html_js_files = [
+    'js/desktop-sidebar.js',
+    ]
+
 # HTML Favicon
 html_favicon = '_static/bridge.ico'