Show version/language selectors below the title (#1601)

* Show version/language selectors below the title * Use CSS styles from old attempt https://github.com/readthedocs/sphinx_rtd_theme/pull/438 * Update CSS to apply to both selectors * Prepend the current version if it's hidden * Split it into two different configs * Use correct value for language * Make the selectors more prominent * Typo fix on comment * Update CSS * Update JavaScript * Always include the version javascript * Only include the languages if there is one * Change `display_version` default * HTML layout rework * Update docs * HTML layout fix * Docs typo * Update CSS * Updates from review * re-compile CSS * Update CSS * Apply suggestions from code review Co-authored-by: Eric Holscher <25510+ericholscher@users.noreply.github.com> * Use the prettier to lint the file * Whitespaces * Update event listener * Update CSS * Update CSS * Remove language switch if there are not translations * Tune version and language selector styles (#1603) * Tuning on select width and icon placement * Use better cursor * Add a max width to selects so that they can't overflow * Only add after pseudo element if select exists * Lint * Debug: trigger Read the Docs Addons event to test/debug locally (#1606) * Debug: trigger Read the Docs Addons event to test/debug locally Closes #1605 * Push missing file --------- Co-authored-by: Eric Holscher <25510+ericholscher@users.noreply.github.com> Co-authored-by: Anthony <aj@ohess.org>
2026-10-12 09:24:51 -05:00 · 2024-09-20 20:01:11 +02:00
1 parent 9c75444a73
commit 4cab02fff8
@@ -0,0 +1,369 @@
+{
+    "addons": {
+        "analytics": {
+            "code": null,
+            "enabled": true
+        },
+        "ethicalads": {
+            "ad_free": false,
+            "campaign_types": [
+                "community",
+                "house",
+                "paid"
+            ],
+            "enabled": true,
+            "keywords": [
+                "only words"
+            ],
+            "publisher": "readthedocs"
+        },
+        "external_version_warning": {
+            "enabled": true
+        },
+        "flyout": {
+            "enabled": true
+        },
+        "hotkeys": {
+            "doc_diff": {
+                "enabled": true,
+                "trigger": "KeyD"
+            },
+            "enabled": true,
+            "search": {
+                "enabled": true,
+                "trigger": "Slash"
+            }
+        },
+        "non_latest_version_warning": {
+            "enabled": true
+        },
+        "search": {
+            "default_filter": "project:sphinx-rtd-theme/stable",
+            "enabled": true,
+            "filters": [
+                [
+                    "Include subprojects",
+                    "subprojects:sphinx-rtd-theme/stable"
+                ]
+            ]
+        }
+    },
+    "api_version": "1",
+    "builds": {
+        "current": {
+            "commit": "7c9b1b5d391f6d7fae72274393eb25d1df96e546",
+            "created": "2023-11-28T04:14:06.510677Z",
+            "duration": 42,
+            "error": "",
+            "finished": "2023-11-28T04:14:48.510Z",
+            "id": 22677856,
+            "project": "sphinx-rtd-theme",
+            "state": {
+                "code": "finished",
+                "name": "Finished"
+            },
+            "success": true,
+            "urls": {
+                "build": "https://readthedocs.org/projects/sphinx-rtd-theme/builds/22677856/",
+                "project": "https://readthedocs.org/projects/sphinx-rtd-theme/",
+                "version": "https://readthedocs.org/projects/sphinx-rtd-theme/version/stable/edit/"
+            },
+            "version": "stable"
+        }
+    },
+    "domains": {
+        "dashboard": "readthedocs.org"
+    },
+    "projects": {
+        "current": {
+            "created": "2017-12-21T04:04:42.561793Z",
+            "default_branch": "master",
+            "default_version": "stable",
+            "external_builds_privacy_level": "public",
+            "homepage": null,
+            "id": 170010,
+            "language": {
+                "code": "en",
+                "name": "English"
+            },
+            "modified": "2021-03-16T17:13:52.465051Z",
+            "name": "sphinx_rtd_theme",
+            "privacy_level": "public",
+            "programming_language": {
+                "code": "words",
+                "name": "Only Words"
+            },
+            "repository": {
+                "type": "git",
+                "url": "https://github.com/readthedocs/sphinx_rtd_theme"
+            },
+            "single_version": false,
+            "slug": "sphinx-rtd-theme",
+            "subproject_of": null,
+            "tags": [],
+            "translation_of": null,
+            "urls": {
+                "builds": "https://readthedocs.org/projects/sphinx-rtd-theme/builds/",
+                "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/stable/",
+                "downloads": "https://readthedocs.org/projects/sphinx-rtd-theme/downloads/",
+                "home": "https://readthedocs.org/projects/sphinx-rtd-theme/",
+                "versions": "https://readthedocs.org/projects/sphinx-rtd-theme/versions/"
+            },
+            "users": [
+                {
+                    "username": "eric"
+                },
+                {
+                    "username": "humitos"
+                },
+                {
+                    "username": "agj"
+                }
+            ],
+            "versioning_scheme": "multiple_versions_with_translations"
+        },
+        "translations": []
+    },
+    "readthedocs": {
+        "analytics": {
+            "code": null
+        }
+    },
+    "versions": {
+        "active": [
+            {
+                "active": true,
+                "aliases": [],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 6692534,
+                "identifier": "b07560bf97dad3a4266f6145bd4b662ac708ab00",
+                "privacy_level": "public",
+                "ref": null,
+                "slug": "0.5.2",
+                "type": "tag",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/0.5.2/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/0.5.2/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/0.5.2/"
+                },
+                "verbose_name": "0.5.2"
+            },
+            {
+                "active": true,
+                "aliases": [],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 7273098,
+                "identifier": "c9b1bde560d8ee31400e4e4f92f2e8d7a42265ce",
+                "privacy_level": "public",
+                "ref": null,
+                "slug": "1.0.0",
+                "type": "tag",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/1.0.0/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/1.0.0/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/1.0.0/"
+                },
+                "verbose_name": "1.0.0"
+            },
+            {
+                "active": true,
+                "aliases": [],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 10496721,
+                "identifier": "f854c890e1445b99a43ac5f10463a5df83739a2e",
+                "privacy_level": "public",
+                "ref": null,
+                "slug": "1.1.1",
+                "type": "tag",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/1.1.1/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/1.1.1/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/1.1.1/"
+                },
+                "verbose_name": "1.1.1"
+            },
+            {
+                "active": true,
+                "aliases": [],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 16340532,
+                "identifier": "9899ee4ee2f547f81e51297dc12317f018e62fdd",
+                "privacy_level": "public",
+                "ref": null,
+                "slug": "1.2.2",
+                "type": "tag",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/1.2.2/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/1.2.2/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/1.2.2/"
+                },
+                "verbose_name": "1.2.2"
+            },
+            {
+                "active": true,
+                "aliases": [],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 17681643,
+                "identifier": "15ed4de08de55f7066ff4f2ac39883a397db30d3",
+                "privacy_level": "public",
+                "ref": null,
+                "slug": "1.3.0",
+                "type": "tag",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/1.3.0/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/1.3.0/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/1.3.0/"
+                },
+                "verbose_name": "1.3.0"
+            },
+            {
+                "active": true,
+                "aliases": [],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 18862205,
+                "identifier": "7c9b1b5d391f6d7fae72274393eb25d1df96e546",
+                "privacy_level": "public",
+                "ref": null,
+                "slug": "2.0.0",
+                "type": "tag",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/2.0.0/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/2.0.0/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/2.0.0/"
+                },
+                "verbose_name": "2.0.0"
+            },
+            {
+                "active": true,
+                "aliases": [
+                    {
+                        "active": true,
+                        "aliases": [],
+                        "built": true,
+                        "downloads": {},
+                        "hidden": false,
+                        "id": 18862205,
+                        "identifier": "7c9b1b5d391f6d7fae72274393eb25d1df96e546",
+                        "privacy_level": "public",
+                        "ref": null,
+                        "slug": "2.0.0",
+                        "type": "tag",
+                        "urls": {
+                            "dashboard": {
+                                "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/2.0.0/edit/"
+                            },
+                            "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/2.0.0/",
+                            "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/2.0.0/"
+                        },
+                        "verbose_name": "2.0.0"
+                    }
+                ],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 3271725,
+                "identifier": "7c9b1b5d391f6d7fae72274393eb25d1df96e546",
+                "privacy_level": "public",
+                "ref": "2.0.0",
+                "slug": "stable",
+                "type": "tag",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/stable/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/stable/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/2.0.0/"
+                },
+                "verbose_name": "stable"
+            },
+            {
+                "active": true,
+                "aliases": [],
+                "built": true,
+                "downloads": {},
+                "hidden": false,
+                "id": 3271688,
+                "identifier": "master",
+                "privacy_level": "public",
+                "ref": null,
+                "slug": "latest",
+                "type": "branch",
+                "urls": {
+                    "dashboard": {
+                        "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/latest/edit/"
+                    },
+                    "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/latest/",
+                    "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/master/"
+                },
+                "verbose_name": "latest"
+            }
+        ],
+        "current": {
+            "active": true,
+            "aliases": [
+                {
+                    "active": true,
+                    "aliases": [],
+                    "built": true,
+                    "downloads": {},
+                    "hidden": false,
+                    "id": 18862205,
+                    "identifier": "7c9b1b5d391f6d7fae72274393eb25d1df96e546",
+                    "privacy_level": "public",
+                    "ref": null,
+                    "slug": "2.0.0",
+                    "type": "tag",
+                    "urls": {
+                        "dashboard": {
+                            "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/2.0.0/edit/"
+                        },
+                        "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/2.0.0/",
+                        "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/2.0.0/"
+                    },
+                    "verbose_name": "2.0.0"
+                }
+            ],
+            "built": true,
+            "downloads": {},
+            "hidden": false,
+            "id": 3271725,
+            "identifier": "7c9b1b5d391f6d7fae72274393eb25d1df96e546",
+            "privacy_level": "public",
+            "ref": "2.0.0",
+            "slug": "stable",
+            "type": "tag",
+            "urls": {
+                "dashboard": {
+                    "edit": "https://readthedocs.org/projects/sphinx-rtd-theme/version/stable/edit/"
+                },
+                "documentation": "https://sphinx-rtd-theme.readthedocs.io/en/stable/",
+                "vcs": "https://github.com/readthedocs/sphinx_rtd_theme/tree/2.0.0/"
+            },
+            "verbose_name": "stable"
+        }
+    }
+}
@@ -4,4 +4,40 @@ $(function () {
  $("[data-toggle='rst-debug-badge']").on("click", function () {
    $("[data-toggle='rst-versions']").toggleClass("rst-badge");
  });
-})
+});
+
+
+const EVENT_READTHEDOCS_ADDONS_DATA_READY = "readthedocs-addons-data-ready";
+
+fetch("_static/addons.mocked.json", { method: "GET" })
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error("Error downloading Read the Docs Addons mocked data");
+    }
+    return response.json();
+  })
+  .then((data) => {
+    return dispatchEvent(
+      EVENT_READTHEDOCS_ADDONS_DATA_READY,
+      new ReadTheDocsEventData(data),
+    );
+  });
+
+
+// ``ReadTheDocsEventData`` and ``dispatchEvent``
+// are borrowed and adapted from Read the Docs Addons.
+// https://github.com/readthedocs/addons
+class ReadTheDocsEventData {
+  constructor(data) {
+    this._data = data;
+  }
+
+  data() {
+    return this._data;
+  }
+}
+
+function dispatchEvent(eventName, data) {
+  const event = new CustomEvent(eventName, { detail: data });
+  document.dispatchEvent(event);
+}
@@ -1,55 +0,0 @@
-{%- extends "!layout.html" %}
-
-{#-
-
-This template exists as a way to implement a version menu without changing what
-the theme normally renders the menu on local builds and on builds on Read the
-Docs. This is for local testing purposes only.
-
-#}
-
-{%- block footer %}
-  {%- if not READTHEDOCS %}
-    <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
-      <span class="rst-current-version" data-toggle="rst-current-version">
-        <span class="fa fa-book"> Read the Docs</span>
-        v: latest
-        <span class="fa fa-caret-down"></span>
-      </span>
-      <div class="rst-other-versions">
-        <dl>
-          <dt>{{ _('Versions') }}</dt>
-          {%- if test_versions %}
-            {%- for version in test_versions %}
-            <dd><a href="#">{{ version }}</a></dd>
-            {%- endfor %}
-          {%- else %}
-            <dd><a href="#">latest</a></dd>
-            <dd><a href="#">1.0</a></dd>
-            <dd><a href="#">1.1</a></dd>
-          {%- endif %}
-        </dl>
-        <dl>
-          <dt>{{ _('Downloads') }}</dt>
-          <dd><a href="#">PDF</a></dd>
-          <dd><a href="#">ePub</a></dd>
-          <dd><a href="#">HTML</a></dd>
-        </dl>
-        <dl>
-          {#- Translators: The phrase "Read the Docs" is not translated #}
-          <dt>{{ _('On Read the Docs') }}</dt>
-            <dd>
-              <a href="#">{{ _('Project Home') }}</a>
-            </dd>
-            <dd>
-              <a href="#">{{ _('Builds') }}</a>
-            </dd>
-        </dl>
-        <dl>
-          <dt>Debug</dt>
-          <dd><a href="#" data-toggle="rst-debug-badge">Swap badge position</a></dd>
-        </dl>
-      </div>
-    </div>
-  {%- endif %}
-{%- endblock %}
@@ -61,12 +61,7 @@ html_context = {}
 if not 'READTHEDOCS' in os.environ:
    html_static_path = ['_static/']
    html_js_files = ['debug.js']
-
-    # Add fake versions for local QA of the menu
-    html_context['test_versions'] = list(map(
-        lambda x: str(x / 10),
-        range(1, 100)
-    ))
+    html_context["DEBUG"] = True

 html_logo = "demo/static/logo-wordmark-light.svg"
 html_show_sourcelink = True
@@ -16,12 +16,13 @@ For example:
        'analytics_id': 'G-XXXXXXXXXX',  #  Provided by Google in your dashboard
        'analytics_anonymize_ip': False,
        'logo_only': False,
-        'display_version': True,
        'prev_next_buttons_location': 'bottom',
        'style_external_links': False,
        'vcs_pageview_mode': '',
        'style_nav_header_background': 'white',
        'flyout_display': 'hidden',
+        'version_selector': True,
+        'language_selector': True,
        # Toc options
        'collapse_navigation': True,
        'sticky_navigation': True,
@@ -139,7 +140,11 @@ Miscellaneous options
    If ``True``, the version number is shown at the top of the sidebar.

    :type: boolean
-    :default: ``True``
+    :default: ``False``
+
+    .. deprecated:: 3.0.0
+
+       Removed in favor of ``version_selector`` and ``language_selector``.

 .. confval:: logo_only

@@ -192,6 +197,26 @@ Miscellaneous options
    :type: str
    :default: ``hidden``

+.. confval:: version_selector
+
+    Display a version selector below the title.
+    This feature makes usage of `Read the Docs Addons <https://docs.readthedocs.io/page/addons.html>`_ for this,
+    so it's required the documentation to be hosted on Read the Docs.
+    It only appears when there are more than 1 active version.
+
+    :type: boolean
+    :default: ``True``
+
+.. confval:: language_selector
+
+    Display a language selector below the title.
+    This feature makes usage of `Read the Docs Addons <https://docs.readthedocs.io/page/addons.html>`_ for this,
+    so it's required the documentation to be served on Read the Docs.
+    It only appears when there is more than 1 active language.
+
+    :type: boolean
+    :default: ``True``
+

 File-wide metadata
 ==================
@@ -67,7 +67,7 @@
    {%- endfor %}
    <script src="{{ pathto('_static/js/theme.js', 1) }}"></script>

-    {%- if READTHEDOCS and theme_flyout_display != "hidden" %}
+    {%- if READTHEDOCS or DEBUG %}
    <script src="{{ pathto('_static/js/versions.js', 1) }}"></script>
    {%- endif %}

@@ -124,14 +124,11 @@
            {%- endif %}
          </a>

-          {%- if theme_display_version %}
-            {%- set nav_version = version %}
-            {%- if READTHEDOCS and current_version %}
-              {%- set nav_version = current_version %}
-            {%- endif %}
-            {%- if nav_version %}
-              <div class="version">
-                {{ nav_version }}
+          {%- if READTHEDOCS or DEBUG %}
+            {%- if theme_version_selector or theme_language_selector %}
+              <div class="switch-menus">
+                <div class="version-switch"></div>
+                <div class="language-switch"></div>
              </div>
            {%- endif %}
          {%- endif %}
@@ -1,4 +1,4 @@
 html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden],audio:not([controls]){display:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:0}dfn{font-style:italic}ins{background:#ff9;text-decoration:none}ins,mark{color:#000}mark{background:#ff0;font-style:italic;font-weight:700}.rst-content code,.rst-content tt,code,kbd,pre,samp{font-family:monospace,serif;_font-family:courier new,monospace;font-size:1em}pre{white-space:pre}q{quotes:none}q:after,q:before{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,ol,ul{margin:0;padding:0;list-style:none;list-style-image:none}li{list-style:none}dd{margin:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;max-width:100%}svg:not(:root){overflow:hidden}figure,form{margin:0}label{cursor:pointer}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.ir{display:block;border:0;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0}.ir br{display:none}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.relative{position:relative}big,small{font-size:100%}@media print{body,html,section{background:none!important}*{box-shadow:none!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a,a:visited{text-decoration:underline}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}.rst-content .toctree-wrapper>p.caption,h2,h3,p{orphans:3;widows:3}.rst-content .toctree-wrapper>p.caption,h2,h3{page-break-after:avoid}}.btn,.fa:before,.icon:before,.rst-content .admonition,.rst-content .admonition-title:before,.rst-content .admonition-todo,.rst-content .attention,.rst-content .caution,.rst-content .code-block-caption .headerlink:before,.rst-content .danger,.rst-content .eqno .headerlink:before,.rst-content .error,.rst-content .hint,.rst-content .important,.rst-content .note,.rst-content .seealso,.rst-content .tip,.rst-content .warning,.rst-content code.download span:first-child:before,.rst-content dl dt .headerlink:before,.rst-content h1 .headerlink:before,.rst-content h2 .headerlink:before,.rst-content h3 .headerlink:before,.rst-content h4 .headerlink:before,.rst-content h5 .headerlink:before,.rst-content h6 .headerlink:before,.rst-content p.caption .headerlink:before,.rst-content p .headerlink:before,.rst-content table>caption .headerlink:before,.rst-content tt.download span:first-child:before,.wy-alert,.wy-dropdown .caret:before,.wy-inline-validate.wy-inline-validate-danger .wy-input-context:before,.wy-inline-validate.wy-inline-validate-info .wy-input-context:before,.wy-inline-validate.wy-inline-validate-success .wy-input-context:before,.wy-inline-validate.wy-inline-validate-warning .wy-input-context:before,.wy-menu-vertical li.current>a button.toctree-expand:before,.wy-menu-vertical li.on a button.toctree-expand:before,.wy-menu-vertical li button.toctree-expand:before,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{-webkit-font-smoothing:antialiased}.clearfix{*zoom:1}.clearfix:after,.clearfix:before{display:table;content:""}.clearfix:after{clear:both}/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{font-family:FontAwesome;src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713?#iefix&v=4.7.0) format("embedded-opentype"),url(fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"),url(fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"),url(fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"),url(fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa,.icon,.rst-content .admonition-title,.rst-content .code-block-caption .headerlink,.rst-content .eqno .headerlink,.rst-content code.download span:first-child,.rst-content dl dt .headerlink,.rst-content h1 .headerlink,.rst-content h2 .headerlink,.rst-content h3 .headerlink,.rst-content h4 .headerlink,.rst-content h5 .headerlink,.rst-content h6 .headerlink,.rst-content p.caption .headerlink,.rst-content p .headerlink,.rst-content table>caption .headerlink,.rst-content tt.download span:first-child,.wy-menu-vertical li.current>a button.toctree-expand,.wy-menu-vertical li.on a button.toctree-expand,.wy-menu-vertical li button.toctree-expand{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14286em;width:2.14286em;top:.14286em;text-align:center}.fa-li.fa-lg{left:-1.85714em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa-pull-left.icon,.fa.fa-pull-left,.rst-content .code-block-caption .fa-pull-left.headerlink,.rst-content .eqno .fa-pull-left.headerlink,.rst-content .fa-pull-left.admonition-title,.rst-content code.download span.fa-pull-left:first-child,.rst-content dl dt .fa-pull-left.headerlink,.rst-content h1 .fa-pull-left.headerlink,.rst-content h2 .fa-pull-left.headerlink,.rst-content h3 .fa-pull-left.headerlink,.rst-content h4 .fa-pull-left.headerlink,.rst-content h5 .fa-pull-left.headerlink,.rst-content h6 .fa-pull-left.headerlink,.rst-content p .fa-pull-left.headerlink,.rst-content table>caption .fa-pull-left.headerlink,.rst-content tt.download span.fa-pull-left:first-child,.wy-menu-vertical li.current>a button.fa-pull-left.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-left.toctree-expand,.wy-menu-vertical li button.fa-pull-left.toctree-expand{margin-right:.3em}.fa-pull-right.icon,.fa.fa-pull-right,.rst-content .code-block-caption .fa-pull-right.headerlink,.rst-content .eqno .fa-pull-right.headerlink,.rst-content .fa-pull-right.admonition-title,.rst-content code.download span.fa-pull-right:first-child,.rst-content dl dt .fa-pull-right.headerlink,.rst-content h1 .fa-pull-right.headerlink,.rst-content h2 .fa-pull-right.headerlink,.rst-content h3 .fa-pull-right.headerlink,.rst-content h4 .fa-pull-right.headerlink,.rst-content h5 .fa-pull-right.headerlink,.rst-content h6 .fa-pull-right.headerlink,.rst-content p .fa-pull-right.headerlink,.rst-content table>caption .fa-pull-right.headerlink,.rst-content tt.download span.fa-pull-right:first-child,.wy-menu-vertical li.current>a button.fa-pull-right.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-right.toctree-expand,.wy-menu-vertical li button.fa-pull-right.toctree-expand{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left,.pull-left.icon,.rst-content .code-block-caption .pull-left.headerlink,.rst-content .eqno .pull-left.headerlink,.rst-content .pull-left.admonition-title,.rst-content code.download span.pull-left:first-child,.rst-content dl dt .pull-left.headerlink,.rst-content h1 .pull-left.headerlink,.rst-content h2 .pull-left.headerlink,.rst-content h3 .pull-left.headerlink,.rst-content h4 .pull-left.headerlink,.rst-content h5 .pull-left.headerlink,.rst-content h6 .pull-left.headerlink,.rst-content p .pull-left.headerlink,.rst-content table>caption .pull-left.headerlink,.rst-content tt.download span.pull-left:first-child,.wy-menu-vertical li.current>a button.pull-left.toctree-expand,.wy-menu-vertical li.on a button.pull-left.toctree-expand,.wy-menu-vertical li button.pull-left.toctree-expand{margin-right:.3em}.fa.pull-right,.pull-right.icon,.rst-content .code-block-caption .pull-right.headerlink,.rst-content .eqno .pull-right.headerlink,.rst-content .pull-right.admonition-title,.rst-content code.download span.pull-right:first-child,.rst-content dl dt .pull-right.headerlink,.rst-content h1 .pull-right.headerlink,.rst-content h2 .pull-right.headerlink,.rst-content h3 .pull-right.headerlink,.rst-coLine truncated
+ */@font-face{font-family:FontAwesome;src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);src:url(fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713?#iefix&v=4.7.0) format("embedded-opentype"),url(fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"),url(fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"),url(fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"),url(fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa,.icon,.rst-content .admonition-title,.rst-content .code-block-caption .headerlink,.rst-content .eqno .headerlink,.rst-content code.download span:first-child,.rst-content dl dt .headerlink,.rst-content h1 .headerlink,.rst-content h2 .headerlink,.rst-content h3 .headerlink,.rst-content h4 .headerlink,.rst-content h5 .headerlink,.rst-content h6 .headerlink,.rst-content p.caption .headerlink,.rst-content p .headerlink,.rst-content table>caption .headerlink,.rst-content tt.download span:first-child,.wy-menu-vertical li.current>a button.toctree-expand,.wy-menu-vertical li.on a button.toctree-expand,.wy-menu-vertical li button.toctree-expand{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14286em;width:2.14286em;top:.14286em;text-align:center}.fa-li.fa-lg{left:-1.85714em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa-pull-left.icon,.fa.fa-pull-left,.rst-content .code-block-caption .fa-pull-left.headerlink,.rst-content .eqno .fa-pull-left.headerlink,.rst-content .fa-pull-left.admonition-title,.rst-content code.download span.fa-pull-left:first-child,.rst-content dl dt .fa-pull-left.headerlink,.rst-content h1 .fa-pull-left.headerlink,.rst-content h2 .fa-pull-left.headerlink,.rst-content h3 .fa-pull-left.headerlink,.rst-content h4 .fa-pull-left.headerlink,.rst-content h5 .fa-pull-left.headerlink,.rst-content h6 .fa-pull-left.headerlink,.rst-content p .fa-pull-left.headerlink,.rst-content table>caption .fa-pull-left.headerlink,.rst-content tt.download span.fa-pull-left:first-child,.wy-menu-vertical li.current>a button.fa-pull-left.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-left.toctree-expand,.wy-menu-vertical li button.fa-pull-left.toctree-expand{margin-right:.3em}.fa-pull-right.icon,.fa.fa-pull-right,.rst-content .code-block-caption .fa-pull-right.headerlink,.rst-content .eqno .fa-pull-right.headerlink,.rst-content .fa-pull-right.admonition-title,.rst-content code.download span.fa-pull-right:first-child,.rst-content dl dt .fa-pull-right.headerlink,.rst-content h1 .fa-pull-right.headerlink,.rst-content h2 .fa-pull-right.headerlink,.rst-content h3 .fa-pull-right.headerlink,.rst-content h4 .fa-pull-right.headerlink,.rst-content h5 .fa-pull-right.headerlink,.rst-content h6 .fa-pull-right.headerlink,.rst-content p .fa-pull-right.headerlink,.rst-content table>caption .fa-pull-right.headerlink,.rst-content tt.download span.fa-pull-right:first-child,.wy-menu-vertical li.current>a button.fa-pull-right.toctree-expand,.wy-menu-vertical li.on a button.fa-pull-right.toctree-expand,.wy-menu-vertical li button.fa-pull-right.toctree-expand{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left,.pull-left.icon,.rst-content .code-block-caption .pull-left.headerlink,.rst-content .eqno .pull-left.headerlink,.rst-content .pull-left.admonition-title,.rst-content code.download span.pull-left:first-child,.rst-content dl dt .pull-left.headerlink,.rst-content h1 .pull-left.headerlink,.rst-content h2 .pull-left.headerlink,.rst-content h3 .pull-left.headerlink,.rst-content h4 .pull-left.headerlink,.rst-content h5 .pull-left.headerlink,.rst-content h6 .pull-left.headerlink,.rst-content p .pull-left.headerlink,.rst-content table>caption .pull-left.headerlink,.rst-content tt.download span.pull-left:first-child,.wy-menu-vertical li.current>a button.pull-left.toctree-expand,.wy-menu-vertical li.on a button.pull-left.toctree-expand,.wy-menu-vertical li button.pull-left.toctree-expand{margin-right:.3em}.fa.pull-right,.pull-right.icon,.rst-content .code-block-caption .pull-right.headerlink,.rst-content .eqno .pull-right.headerlink,.rst-content .pull-right.admonition-title,.rst-content code.download span.pull-right:first-child,.rst-content dl dt .pull-right.headerlink,.rst-content h1 .pull-right.headerlink,.rst-content h2 .pull-right.headerlink,.rst-content h3 .pull-right.headerlink,.rst-coLine truncated
@@ -1,4 +1,9 @@
-function renderLanguages(config) {
+const themeFlyoutDisplay = "{{ theme_flyout_display }}";
+const themeVersionSelector = "{{ theme_version_selector }}";
+const themeLanguageSelector = "{{ theme_language_selector }}";
+
+if (themeFlyoutDisplay === "attached") {
+  function renderLanguages(config) {
    if (!config.projects.translations.length) {
      return "";
    }
@@ -6,12 +11,15 @@ function renderLanguages(config) {
    const languagesHTML = `
      <dl>
        <dt>{{ _('Languages') }}</dt>
-       ${ config.projects.translations.map(
+        ${config.projects.translations
+          .map(
            (translation) => `
-       <dd ${ translation.slug == config.projects.current.slug ? 'class="rtd-current-item"' : '' }>
-         <a href="${ translation.urls.documentation }">${ translation.language.code }</a>
+        <dd ${translation.slug == config.projects.current.slug ? 'class="rtd-current-item"' : ""}>
+          <a href="${translation.urls.documentation}">${translation.language.code}</a>
        </dd>
-       `).join("\n")}
+        `,
+          )
+          .join("\n")}
      </dl>
    `;
    return languagesHTML;
@@ -24,12 +32,15 @@ function renderLanguages(config) {
    const versionsHTML = `
      <dl>
        <dt>{{ _('Versions') }}</dt>
-        ${ config.versions.active.map(
+        ${config.versions.active
+          .map(
            (version) => `
-        <dd ${ version.slug === config.versions.current.slug ? 'class="rtd-current-item"' : '' }>
-          <a href="${ version.urls.documentation }">${ version.slug }</a>
+        <dd ${version.slug === config.versions.current.slug ? 'class="rtd-current-item"' : ""}>
+          <a href="${version.urls.documentation}">${version.slug}</a>
        </dd>
-        `).join("\n")}
+        `,
+          )
+          .join("\n")}
      </dl>
    `;
    return versionsHTML;
@@ -48,42 +59,45 @@ function renderLanguages(config) {
    const downloadsHTML = `
      <dl>
        <dt>{{ _('Downloads') }}</dt>
-        ${ Object.entries(config.versions.current.downloads).map(
+        ${Object.entries(config.versions.current.downloads)
+          .map(
            ([name, url]) => `
          <dd>
-            <a href="${ url }">${ downloadsNameDisplay[name] }</a>
+            <a href="${url}">${downloadsNameDisplay[name]}</a>
          </dd>
-        `).join("\n")}
+        `,
+          )
+          .join("\n")}
      </dl>
    `;
    return downloadsHTML;
  }

-  document.addEventListener("readthedocs-addons-data-ready", function(event) {
+  document.addEventListener("readthedocs-addons-data-ready", function (event) {
    const config = event.detail.data();

    const flyout = `
      <div class="rst-versions" data-toggle="rst-versions" role="note">
        <span class="rst-current-version" data-toggle="rst-current-version">
          <span class="fa fa-book"> Read the Docs</span>
-          v: ${ config.versions.current.slug }
+          v: ${config.versions.current.slug}
          <span class="fa fa-caret-down"></span>
        </span>
        <div class="rst-other-versions">
          <div class="injected">
-            ${ renderLanguages(config) }
-            ${ renderVersions(config) }
-            ${ renderDownloads(config) }
+            ${renderLanguages(config)}
+            ${renderVersions(config)}
+            ${renderDownloads(config)}
            <dl>
              <dt>{{ _('On Read the Docs') }}</dt>
              <dd>
-                <a href="${ config.projects.current.urls.home }">{{ _('Project Home') }}</a>
+                <a href="${config.projects.current.urls.home}">{{ _('Project Home') }}</a>
              </dd>
              <dd>
-                <a href="${ config.projects.current.urls.builds }">{{ _('Builds') }}</a>
+                <a href="${config.projects.current.urls.builds}">{{ _('Builds') }}</a>
              </dd>
              <dd>
-                <a href="${ config.projects.current.urls.downloads }">{{ _('Downloads') }}</a>
+                <a href="${config.projects.current.urls.downloads}">{{ _('Downloads') }}</a>
              </dd>
            </dl>
            <dl>
@@ -112,14 +126,97 @@ function renderLanguages(config) {
    document.body.insertAdjacentHTML("beforeend", flyout);

    // Trigger the Read the Docs Addons Search modal when clicking on the "Search docs" input from inside the flyout.
-    document.querySelector("#flyout-search-form").addEventListener("focusin", () => {
+    document
+      .querySelector("#flyout-search-form")
+      .addEventListener("focusin", () => {
        const event = new CustomEvent("readthedocs-search-show");
        document.dispatchEvent(event);
      });

    // Trigger the Read the Docs Addons Search modal when clicking on "Search docs" input from the topnav.
-    document.querySelector("[role='search'] input").addEventListener("focusin", () => {
+    document
+      .querySelector("[role='search'] input")
+      .addEventListener("focusin", () => {
        const event = new CustomEvent("readthedocs-search-show");
        document.dispatchEvent(event);
      });
  });
+}
+
+if (themeLanguageSelector || themeVersionSelector) {
+  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 versionSwitch = document.querySelector(
+      "div.switch-menus > div.version-switch",
+    );
+    if (themeVersionSelector) {
+      let versions = config.versions.active;
+      if (config.versions.current.type === "external") {
+        versions.unshift(config.versions.current);
+      }
+      const versionSelect = `
+    <select>
+      ${versions
+        .map(
+          (version) => `
+        <option
+  value="${version.slug}"
+  ${config.versions.current.slug === version.slug ? 'selected="selected"' : ""}
+              data-url="${version.urls.documentation}">
+              ${version.slug}
+          </option>`,
+        )
+        .join("\n")}
+    </select>
+  `;
+
+      versionSwitch.innerHTML = versionSelect;
+      versionSwitch.firstElementChild.addEventListener("change", onSelectorSwitch);
+    }
+
+    const languageSwitch = document.querySelector(
+      "div.switch-menus > div.language-switch",
+    );
+
+    if (themeLanguageSelector) {
+      if (config.projects.translations.length) {
+        // Add 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 languageSelect = `
+      <select>
+        ${languages
+          .map(
+            (language) => `
+              <option
+                  value="${language.language.code}"
+                  ${config.projects.current.slug === language.slug ? 'selected="selected"' : ""}
+                  data-url="${language.urls.documentation}">
+                  ${language.language.name}
+              </option>`,
+          )
+          .join("\n")}
+       </select>
+    `;
+
+        languageSwitch.innerHTML = languageSelect;
+        languageSwitch.firstElementChild.addEventListener("change", onSelectorSwitch);
+      }
+      else {
+        languageSwitch.remove();
+      }
+    }
+  });
+}
@@ -13,9 +13,10 @@ navigation_depth = 4
 includehidden = True
 titles_only =
 logo_only =
-display_version = True
 prev_next_buttons_location = bottom
 style_external_links = False
 style_nav_header_background =
 vcs_pageview_mode =
 flyout_display = hidden
+version_selector = True
+language_selector = True
@@ -217,7 +217,7 @@ html
    padding: ($base-line-height / 6) ($base-line-height / 4)
    margin-bottom: $gutter / 2
    max-width: 100%
-    &:hover
+    &:hover, &active, &focus
      background: rgba(255, 255, 255, 0.1)
    img.logo
      display: block  // display on its own line all the time
@@ -228,13 +228,55 @@ html
      max-width: 100%  // shrink on mobile, if appropriate
      background: rgba(0, 0, 0, 0)  // make hover background of parent show up properly
    &.icon
+      display: block
      img.logo
        margin-top: 0.85em  // space it away from the title text
-  > div.version
+  > div.switch-menus
+    position: relative
+    display: block
    margin-top: -1 * $gutter / 4
    margin-bottom: $gutter / 2
    font-weight: normal
-    color: rgba(255, 255, 255, 0.3)
+    color: rgba(255, 255,255, 0.3)
+    > div.version-switch, > div.language-switch
+      display: inline-block
+      padding: .2em
+      select
+        // Provide room for dropdown icon
+        display: inline-block
+        margin-right: -2rem
+        padding-right: 2rem
+        max-width: $nav-desktop-width * .8
+        // Alter base select styles
+        text-align-last: center
+        background: none
+        border: none
+        border-radius: 0em
+        box-shadow: none
+        font-family: $base-font-family
+        font-size: 1em
+        font-weight: normal
+        color: rgba(255, 255, 255, .3)
+        cursor: pointer
+        // Allow for padding
+        appearance: none
+        -webkit-appearance: none
+        -moz-appearance: none
+        &:hover, &:active, &:focus
+          background: rgba(255, 255, 255, .1)
+          color: rgba(255, 255, 255, .5)
+      &:has(> select):after
+        display: inline-block
+        width: 1.5em
+        height: 100%
+        padding: .1em
+        content: "\f0d7"
+        font-size: 1em
+        line-height: 1.2em
+        font-family: FontAwesome
+        text-align: center
+        pointer-events: none
+        box-sizing: border-box

 .wy-nav .wy-menu-vertical
  header