Skip to content

Sidebar toggle buttons missing click handlers on desktop when navbar content is present #917

@tbekolay

Description

@tbekolay

Describe the bug

context
When adding anything to the header navbar using navbar_*, the main "toggle sidebar" button does not work.

bug
After some debugging, I believe what's happening is that the sidebar toggle button does not work on wide viewports (≥960px) when custom content is added to the navbar because the theme only seems to attach click handlers to navbar toggle buttons (.pst-navbar-icon.sidebar-toggle), which should be in the sidebar, but those buttons are hidden at large widths. The visible article header toggle button (.header-article-item .sidebar-toggle) receives no click handler whatsoever.

problem
The main toggle sidebar button that users expect to work does nothing.

Reproduce the bug

  1. Set up an env with sphinx-book-theme
  2. Make a minimal index.rst (just "Hello!" is fine) and the following minimal conf.py
    html_theme = "sphinx_book_theme"
    html_theme_options = {
        "navbar_center": ["page-toc"],
    }
    
  3. Build and view the documentation on desktop (≥960px viewport)
  4. Try clicking the sidebar toggle buttons in the article header.

You will see that clicking the Toggle Sidebar button does nothing. The checkboxes they should control remain unchanged, and if you show them via the browser inspector, checking/unchecking them works as expected. There is also no click handler registered for the button, as can be seen in the browser inspector.

proposed fix
The theme should attach handlers to ALL sidebar toggle buttons, not just navbar ones, or ensure that the correct buttons are visible based on responsive design.

workaround
Anyone happening upon this issue can manually attach click handlers to the article header toggle buttons

document.querySelectorAll('.header-article-item .sidebar-toggle').forEach(button => {
  button.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();

    const isPrimary = button.classList.contains('primary-toggle');
    const checkboxId = isPrimary ? 'pst-primary-sidebar-checkbox' : 'pst-secondary-sidebar-checkbox';
    const checkbox = document.getElementById(checkboxId);

    if (checkbox) {
      checkbox.checked = !checkbox.checked;
    }
  });
});

List your environment

- python version: 3.10.16 via `uv`
- sphinx-book-theme: 1.2.0
- pydata-sphinx-theme: 0.16.1
- Sphinx: 8.1.3
- Browser: Firefox
- Viewport: ≥960px width

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions