Add readthedocs-flyout explicitly using position=inline

docs/configuring.rst

@@ -20,7 +20,7 @@ For example:
         'style_external_links': False,
         'vcs_pageview_mode': '',
         'style_nav_header_background': 'white',
-        'flyout_display': 'hidden',
+        'flyout_display': 'attached',
         'version_selector': True,
         'language_selector': True,
         # Toc options
@@ -192,10 +192,9 @@ Miscellaneous options
     Specify how to display the flyout (language and version selector).
     This can be either ``attached`` or ``hidden``.
     ``attached`` means that it will show the flyout in the bottom of the sidebar.
-    You will need to disable the default `Read the Docs flyout <https://docs.readthedocs.io/en/stable/flyout-menu.html>`_ in order to not have 2 flyouts showing.
 
     :type: str
-    :default: ``hidden``
+    :default: ``attached``
 
 .. confval:: version_selector
 

sphinx_rtd_theme/layout.html

@@ -156,6 +156,12 @@
         </div>
         {%- endblock %}
       </div>
+
+      {%- if READTHEDOCS and theme_flyout_display == "attached" %}
+      <div class="readthedocs-flyout-container">
+        <readthedocs-flyout position="up inline"></readthedocs-flyout>
+      </div>
+      {%- endif %}
     </nav>
 
     <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
@@ -167,6 +173,7 @@
           <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
           <a href="{{ pathto(master_doc) }}">{{ project }}</a>
         {%- endblock %}
+
       </nav>
 
       <div class="wy-nav-content">

sphinx_rtd_theme/static/js/versions.js_t

@@ -1,144 +1,6 @@
-const themeFlyoutDisplay = "{{ theme_flyout_display }}";
 const themeVersionSelector = {{ 'true' if theme_version_selector|tobool else 'false' }};
 const themeLanguageSelector = {{ 'true' if theme_language_selector|tobool else 'false' }};
 
-if (themeFlyoutDisplay === "attached") {
-  function renderLanguages(config) {
-    if (!config.projects.translations.length) {
-      return "";
-    }
-
-    // Insert 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 languagesHTML = `
-      <dl>
-        <dt>{{ _('Languages') }}</dt>
-        ${languages
-          .map(
-            (translation) => `
-        <dd ${translation.slug == config.projects.current.slug ? 'class="rtd-current-item"' : ""}>
-          <a href="${translation.urls.documentation}">${translation.language.code}</a>
-        </dd>
-        `,
-          )
-          .join("\n")}
-      </dl>
-    `;
-    return languagesHTML;
-  }
-
-  function renderVersions(config) {
-    if (!config.versions.active.length) {
-      return "";
-    }
-    const versionsHTML = `
-      <dl>
-        <dt>{{ _('Versions') }}</dt>
-        ${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>
-        `,
-          )
-          .join("\n")}
-      </dl>
-    `;
-    return versionsHTML;
-  }
-
-  function renderDownloads(config) {
-    if (!Object.keys(config.versions.current.downloads).length) {
-      return "";
-    }
-    const downloadsNameDisplay = {
-      pdf: "PDF",
-      epub: "Epub",
-      htmlzip: "HTML",
-    };
-
-    const downloadsHTML = `
-      <dl>
-        <dt>{{ _('Downloads') }}</dt>
-        ${Object.entries(config.versions.current.downloads)
-          .map(
-            ([name, url]) => `
-          <dd>
-            <a href="${url}">${downloadsNameDisplay[name]}</a>
-          </dd>
-        `,
-          )
-          .join("\n")}
-      </dl>
-    `;
-    return downloadsHTML;
-  }
-
-  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}
-          <span class="fa fa-caret-down"></span>
-        </span>
-        <div class="rst-other-versions">
-          <div class="injected">
-            ${renderLanguages(config)}
-            ${renderVersions(config)}
-            ${renderDownloads(config)}
-            <dl>
-              <dt>{{ _('On Read the Docs') }}</dt>
-              <dd>
-                <a href="${config.projects.current.urls.home}">{{ _('Project Home') }}</a>
-              </dd>
-              <dd>
-                <a href="${config.projects.current.urls.builds}">{{ _('Builds') }}</a>
-              </dd>
-              <dd>
-                <a href="${config.projects.current.urls.downloads}">{{ _('Downloads') }}</a>
-              </dd>
-            </dl>
-            <dl>
-              <dt>{{ _('Search') }}</dt>
-              <dd>
-                <form id="flyout-search-form">
-                  <input
-                    class="wy-form"
-                    type="text"
-                    name="q"
-                    aria-label="{{ _('Search docs') }}"
-                    placeholder="{{ _('Search docs') }}"
-                    />
-                </form>
-              </dd>
-            </dl>
-            <hr />
-            <small>
-              <span>Hosted by <a href="https://about.readthedocs.org/?utm_source={{ READTHEDOCS_PROJECT }}&utm_content=flyout">Read the Docs</a></span>
-            </small>
-          </div>
-        </div>
-    `;
-
-    // Inject the generated flyout into the body HTML element.
-    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", () => {
-        const event = new CustomEvent("readthedocs-search-show");
-        document.dispatchEvent(event);
-      });
-  })
-}
-
 if (themeLanguageSelector || themeVersionSelector) {
   function onSelectorSwitch(event) {
     const option = event.target.selectedIndex;

sphinx_rtd_theme/theme.conf

@@ -17,6 +17,6 @@ prev_next_buttons_location = bottom
 style_external_links = False
 style_nav_header_background =
 vcs_pageview_mode =
-flyout_display = hidden
+flyout_display = attached
 version_selector = True
 language_selector = True

src/sass/_theme_layout.sass

@@ -321,7 +321,7 @@ html
   top: 0
   bottom: 0
   left: 0
-  padding-bottom: 2em
+  padding-bottom: 2.5em
   width: $nav-desktop-width
   overflow-x: hidden
   overflow-y: hidden
@@ -334,7 +334,7 @@ html
   width: $nav-desktop-width + 20px
   position: relative
   overflow-x: hidden
-  overflow-y: scroll
+  overflow-y: hidden
   height: 100%
 
 .wy-nav-top
@@ -404,6 +404,9 @@ footer
   margin-top: 12px
   +clearfix
 
+.readthedocs-flyout-container
+  width: calc(100% - 1rem)
+
 #search-results
   .search li
     margin-bottom: $base-line-height