Version selector

.gitignore

@@ -7,3 +7,6 @@ node_modules
 /build
 /dist
 __pycache__
+env/
+
+*.sw[a-p]

src/furo/assets/scripts/furo.js

@@ -160,16 +160,38 @@ function setup() {
   setupScrollSpy();
 }
 
+////////////////////////////////////////////////////////////////////////////////
+// Version dropdown
+////////////////////////////////////////////////////////////////////////////////
+function versionDropdown() {
+  const checkbox = document.getElementById("versions-label");
+  checkbox.addEventListener("click", toggleDropdown);
+
+  function toggleDropdown() {
+    if (localStorage.getItem("version-dropdown-opened") === "true") {
+      localStorage.setItem("version-dropdown-opened", "false");
+    } else {
+      localStorage.setItem("version-dropdown-opened", "true");
+    }
+  }
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // Main entrypoint
 ////////////////////////////////////////////////////////////////////////////////
 function main() {
   document.body.parentNode.classList.remove("no-js");
-
   header = document.querySelector("header");
   tocScroll = document.querySelector(".toc-scroll");
 
   setup();
+
+  // Version dropdown functionality
+  const checkboxInput = document.getElementById("checkbox_toggle");
+  if (localStorage.getItem("version-dropdown-opened") === "true") {
+    checkboxInput.checked = true;
+  }
+  versionDropdown();
 }
 
 document.addEventListener("DOMContentLoaded", main);

src/furo/assets/styles/extensions/_readthedocs.sass

@@ -1,6 +1,46 @@
 // This file contains the styles used for tweaking how ReadTheDoc's embedded
 // contents would show up inside the theme.
 
+#furo-versions
+  font-size: var(--sidebar-item-font-size)
+  margin-bottom: 4em
+
+  .latest-version
+    font-weight: bold
+
+  .current-version
+    font-weight: bold
+
+  .caption
+    display: inline-block
+    color: var(--color-sidebar-caption-text)
+    font-weight: bold
+    text-transform: uppercase
+    font-size: var(--sidebar-caption-font-size)
+    padding-right: var(--sidebar-expander-width)
+    margin-top: 0
+
+  input[type=checkbox]
+    display: none
+    position: absolute
+    box-sizing: border-box
+    padding: 0
+    overflow: visible
+
+  input[type=checkbox]:checked ~ ul
+    display: inline-block
+    line-height: var(--sidebar-item-line-height)
+    margin-left: var(--sidebar-item-spacing-horizontal)
+    padding: var(--sidebar-item-spacing-vertical) var(--sidebar-item-spacing-horizontal)
+    text-decoration: none
+
+  ul
+    display: none
+
+  .versions-label
+    position: relative
+    float: right
+
 #furo-sidebar-ad-placement
   padding: var(--sidebar-item-spacing-vertical) var(--sidebar-item-spacing-horizontal)
   .ethical-sidebar

src/furo/theme/furo/sidebar/variant-selector.html

@@ -30,4 +30,22 @@
     </dl>
   </div>
 </div>
+{% elif versions %}
+<div id="furo-versions" class="rst-versions sidebar-tree" role="note" aria-label="{{ _('Versions') }}" tabindex="0">
+  <p class="caption">Versions</p>
+  <input type="checkbox" id="checkbox_toggle" class="toctree-checkbox versions-checkbox" role="switch">
+  <label id="versions-label" class="versions-label" for="checkbox_toggle">
+    <div class="visually-hidden">Toggle child pages in navigation</div>
+      <i class="icon">
+        <svg>
+          <use href="#svg-arrow-right"></use>
+        </svg>
+      </i>
+    </label>
+  <ul id="versions-children">
+  {% for version in versions|reverse -%}
+  <li{% if version.name == current_version.name %} class="current-version"{%- endif %}>{% if version.name == latest_version.name -%}<b>Latest: </b>{%- endif %}<a href="{{ version.url }}">{{ version.name }}</a></li>
+  {% endfor -%}
+  </ul>
+</div>
 {% endif %}