How to activate the RTD flyout menu?

Question

I'm using Sphinx and ReadTheDocs to build the documentation of my project.

I want to display several version to my end user so I built several branch in my admin area :

But when I'm displaying the doc in my browser (https://sepal-ui.readthedocs.io/en/v_1.1.0/), I cannot click on the flyout menu and change version.

Is it normal and how to make it functional ? I use a readthedocs.yml file (link). Am I missing something ?

I don't experience the issue you describe. When I click on the menu, I see all the available branches and can select any. — Steve Piercy, Mar 03 '21 at 02:53
I just tested it on firefox and it work like a charm. i'll move this to the readTheDoc github issue tracker as it seems to be related to Safari — Pierrick Rambaud, Mar 03 '21 at 12:31
Maybe it's a security setting in Safari, blocking third-party assets? — Steve Piercy, Mar 04 '21 at 04:06
It might be this specific theme, too. I've never seen it before. It looks nice, though. Please try another theme that comes with Sphinx and see if the problem persists. — Steve Piercy, Mar 04 '21 at 08:54
the problem persist if I use the default theme of readTheDoc — Pierrick Rambaud, Mar 04 '21 at 10:05

Shlublu · Answer 1 · 2023-04-01T00:02:58.100

I had exactly the same issue.

I could solve it by adding a script (let's call it flyout.js) to my docs/source/_static directory:

$(document).ready(function() {
    var dropdownToggle = $('.sidebar-nav li a.has-dropdown');
    
    dropdownToggle.on('click', function(e) {
      e.preventDefault();
      var thisLink = $(this);
      var thisParent = thisLink.parent();
  
      if (thisParent.hasClass('open')) {
        thisParent.removeClass('open');
      } else {
        $('.sidebar-nav li').removeClass('open'); 
        thisParent.addClass('open');
      }
    });

    $(document).on('click', function(e) {
      if (!$(e.target).closest('.sidebar-nav li').length) {
        $('.sidebar-nav li').removeClass('open');
      }
    });
});

This scripts gets the flyout drop-down and add open/close features to it.

Once done, you have to add a reference to this script to your conf.py, as well as references to its dependencies:

html_js_files = [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', 
    '_static/flyout.js'
]

This worked for me. I have to confess I didn't find this by myself. I was stuck and after a lot of unsuccessful researches I ended up asking ChatGPT. Its answer was not perfect and had inconsistencies, but at least it led me to this (which is, when you think of it, somewhat unbelievable).

How to activate the RTD flyout menu?

1 Answers1