ENH: place the RDT flyout in the sidebar (#1005)

* try to set the flyout in the left bottom corner

* add a mutation observer

* add some styling

* typo

* start customization

* customization

* avoid y scroll

* custom content

* custom content

* typo

* fix test

* color of the links

* color to surface

* final custom ?

* bug in margins

* custom for small screen

Author: 12rambau

src/pydata_sphinx_theme/assets/scripts/index.js

@@ -350,6 +350,33 @@ if (themeSwitchBtns) {
   );
 }
 
+/*******************************************************************************
+ * MutationObserver to move the ReadTheDocs button
+ */
+
+function initRTDObserver() {
+  const mutatedCallback = (mutationList, observer) => {
+    mutationList.forEach((mutation) => {
+      // Check whether the mutation is for RTD, which will have a specific structure
+      if (mutation.addedNodes.length === 0) {
+        return;
+      }
+      if (mutation.addedNodes[0].data === undefined) {
+        return;
+      }
+      if (mutation.addedNodes[0].data.search("Inserted RTD Footer") != -1) {
+        mutation.addedNodes.forEach((node) => {
+          document.getElementById("rtd-footer-container").append(node);
+        });
+      }
+    });
+  };
+
+  const observer = new MutationObserver(mutatedCallback);
+  const config = { childList: true };
+  observer.observe(document.body, config);
+}
+
 /*******************************************************************************
  * Finalize
  */
@@ -361,3 +388,4 @@ $(scrollToActive);
 $(addTOCInteractivity);
 $(setupSearchButtons);
 $('[data-toggle="tooltip"]').tooltip({ delay: { show: 500, hide: 100 } });
+$(initRTDObserver);

src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss

@@ -0,0 +1,69 @@
+.bd-sidebar-primary div#rtd-footer-container {
+  position: sticky;
+  bottom: -1rem;
+  margin: -1rem; // ignore sidebar padding
+
+  .rst-versions.rst-badge {
+    position: unset;
+    font-size: 0.9em;
+    font-family: var(--pst-font-family-base);
+    max-width: unset;
+
+    .rst-current-version {
+      display: flex;
+      align-items: center;
+      gap: 0.2rem;
+      height: 2.5rem;
+      transition: background-color 0.2s ease-out;
+      background-color: var(--pst-color-background);
+      color: var(--pst-color-success);
+      border-top: 1px solid var(--pst-color-border);
+    }
+
+    .fa.fa-book {
+      color: var(--pst-color-text-muted);
+      margin-right: auto;
+
+      &::after {
+        color: var(--pst-color-text-base);
+        content: "Read The Docs";
+        font-family: var(--pst-font-family-base);
+        font-weight: var(--pst-font-weight-heading);
+      }
+    }
+    .fa.fa-caret-down {
+      color: var(--pst-color-text-muted);
+    }
+  }
+
+  .rst-versions.rst-badge.shift-up {
+    .rst-current-version {
+      border-bottom: 1px solid var(--pst-color-border);
+    }
+  }
+
+  .rst-other-versions {
+    background-color: var(--pst-color-surface);
+    color: var(--pst-color-text-base);
+
+    dl {
+      dd a {
+        color: var(--pst-color-text-muted);
+      }
+    }
+
+    hr {
+      background-color: var(--pst-color-border);
+    }
+
+    small a {
+      color: var(--pst-color-link);
+    }
+
+    input {
+      padding-left: 0.5rem;
+      border: 1px solid var(--pst-color-border);
+      background-color: var(--pst-color-surface);
+    }
+  }
+}

src/pydata_sphinx_theme/assets/styles/index.scss

@@ -55,6 +55,7 @@ $grid-breakpoints: (
 @import "./components/toc-inpage";
 @import "./components/versionmodified";
 @import "./components/indices";
+@import "./components/readthedocs-switcher";
 
 // Content blocks in standard Sphinx
 @import "./content/admonitions";

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html

@@ -34,12 +34,15 @@
   </div>
   {% endif %}
 
-  {# Items that will snap to the bottom of the screen#}
+  {# Items that will snap to the bottom of the screen #}
   <div class="sidebar-end-items sidebar-primary__section">
     {%- for sidebartemplate in theme_primary_sidebar_end %}
     <div class="sidebar-end-items__item">
     {%- include sidebartemplate %}
     </div>
     {%- endfor %}
   </div>
+
+  {# add the rtd flyout in the sidebar if existing #}
+  <div id="rtd-footer-container"></div>
 {% endblock %}

tests/test_build/sidebar_subpage.html

@@ -79,4 +79,6 @@
   <div class="sidebar-end-items__item">
   </div>
  </div>
+ <div id="rtd-footer-container">
+ </div>
 </div>