ryan-roemer / sphinx-bootstrap-theme

Sphinx Bootstrap Theme
http://ryan-roemer.github.io/sphinx-bootstrap-theme/README.html
MIT License
585 stars 213 forks source link

Dropdown menu with each TOC #197

Open kousuke-nakano opened 5 years ago

kousuke-nakano commented 5 years ago

Dear Developers,

I wonder someone has succeeded in realizing this.

I have been trying to modifying dropdown lists (in navbar.html in _templates directory), but not succeeded yet.

in navbar.html

<div class="collapse navbar-collapse nav-collapse">
  <ul class="nav navbar-nav">
        {% if theme_navbar_links %}
        {%- for link in theme_navbar_links %}
        <!--<li><a href="{{ pathto(*link[1:]) }}">{{ link[0] }}</a></li>-->. <- commented (original)
        <li class="dropdown">
        <a role="button"
            data-toggle="dropdown"
            data-target="#"
        href="#">{{ link[0] }} <b class="caret"></b></a>
        <ul class="dropdown-menu">
            {{ tt2nav(toctree(collapse=False) )}} ??
        </ul>
        </li>
        {%- endfor %}
        {% endif %}

in conf.py

def setup(app):
    """Setup."""
    # Hook the events.
    print("app_connect")
    app.connect('html-page-context', hpc)

def tt2nav(toctree, klass=None, appendix=None, divider=False):
    """
    Injects ``has-dropdown`` and ``dropdown`` classes to HTML
    generated by the :func:`toctree` function.

    :param str toctree:
        HTML generated by the :func:`toctree` function.
    """

    tt = toctree
    divider = '<li class="divider"></li>' if divider else ''

    # Append anything just before the closing </ul>.
    if appendix:
        tt = re.sub(r'(</ul>$)', r'{}\1'.format(appendix), tt)

    # Add class attribute to all <ul> elements.
    tt = re.sub(r'<ul>', r'<ul class="">', tt)

    # Add class to first <ul> tag.
    if klass:
        tt = re.sub(r'(^<ul[\s\w-]+class=")', r'\1{} '.format(klass), tt)

    # Add class "active" to all <li> tags with "current" class.
#    tt = re.sub(r'(<li[\s\w-]+class="[^"]*current)([^"]*")', r'\1 active\2', tt)

    # Match each <li> that contains <ul>.
    pattern = r'(<li[\s\w-]+class=")([^>]*>[^<]*<a[^>]*>[^<]*</a>[^<]*<ul[\s\w]+class=")'

    # Inject the classes.
    replace = r'{}\1has-dropdown \2dropdown '.format(divider)

    # Do the replace and return.
    return re.sub(pattern, replace, tt)

def hpc(app, pagename, templatename, context, doctree):
    # Add the tt2nav() callable to Jinja2 template context.
    context['tt2nav'] = tt2nav

I would appreciate it if you could give me some advice.

Best regards.

Originally posted by @kousuke-nakano in https://github.com/ryan-roemer/sphinx-bootstrap-theme/issues/106#issuecomment-526698554

ryan-roemer commented 5 years ago

Can you explain the UX that you're looking for here more? I'm not quite following what you're trying to do.

And as a helpful hint, Bootstrap 3+ removes support for multiple levels of dropdowns that used to be present in Bootstrap 2...