diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
index e6f964ff9..d884163b1 100644
--- a/sphinx_rtd_theme/layout.html
+++ b/sphinx_rtd_theme/layout.html
@@ -124,7 +124,7 @@
{%- endif %}
- {%- if theme_display_version %}
+ {%- if theme_display_version and theme_flyout_display != "selectors" %}
{%- set nav_version = version %}
{%- if READTHEDOCS and current_version %}
{%- set nav_version = current_version %}
@@ -136,6 +136,11 @@
{%- endif %}
{%- endif %}
+ {%- if READTHEDOCS and theme_flyout_display == "selectors" %}
+
+
+ {%- endif %}
+
{%- include "searchbox.html" %}
{%- endblock %}
diff --git a/sphinx_rtd_theme/static/js/versions.js_t b/sphinx_rtd_theme/static/js/versions.js_t
index 3a8ab05e0..0dfd8c186 100644
--- a/sphinx_rtd_theme/static/js/versions.js_t
+++ b/sphinx_rtd_theme/static/js/versions.js_t
@@ -1,3 +1,4 @@
+{%- if theme_flyout_display == "attached" %}
function renderLanguages(config) {
if (!config.projects.translations.length) {
return "";
@@ -123,3 +124,54 @@ function renderLanguages(config) {
document.dispatchEvent(event);
});
});
+{%- endif %}
+
+
+{%- if theme_flyout_display == "selectors" %}
+function onSelectorSwitch(event) {
+ const option = event.target.selectedIndex;
+ const item = event.target.options[option];
+ window.location.href = item.dataset.url;
+ }
+
+document.addEventListener("readthedocs-addons-data-ready", function(event) {
+ const config = event.detail.data();
+
+ const versionOptions = `
+ ${ config.versions.active.map(
+ (version) => `
+ `
+ ).join("\n") }
+ `;
+
+ // Prepend the current language to the options on the selector
+ let languages = config.projects.translations.concat(config.projects.current);
+ languages = languages.sort((a, b) => a.language.name.localeCompare(b.language.name));
+
+ const languageOptions = `
+ ${ languages.map(
+ (language) => `
+ `
+ ).join("\n") }
+ `;
+
+
+ const versionSelect = document.querySelector("#readthedocs-version-selector");
+ versionSelect.addEventListener("change", onSelectorSwitch);
+ versionSelect.innerHTML = versionOptions;
+
+ const languageSelect = document.querySelector("#readthedocs-language-selector");
+ languageSelect.addEventListener("change", onSelectorSwitch);
+ languageSelect.innerHTML = languageOptions;
+});
+{%- endif %}