-
Notifications
You must be signed in to change notification settings - Fork 206
Description
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
- Set up an env with sphinx-book-theme
- Make a minimal
index.rst(just "Hello!" is fine) and the following minimalconf.pyhtml_theme = "sphinx_book_theme" html_theme_options = { "navbar_center": ["page-toc"], } - Build and view the documentation on desktop (≥960px viewport)
- 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