Feature request: Toggle button

[mihaigalos]

Hi,

Awesome stuff!

Is it possible to also have a toggle button for people not familiar with the keyboard shortcuts?

[six-two]

Hi,

I can expose some JavaScript functions, that you can call to toggle or set the visibility of the sidebars. Then a button or link can just call these functions. But since each theme is different, adding buttons for all of them may not be straightforward. The following approaches come to my mind:

1. User is responsible for adding the buttons: easiest for me, extra work for users. But I could try to document some examples.
2. Buttons are added to the bottom of a page: simple to implement, but they likely look out of place
3. Buttons are added to nav (page navigation): not sure how hard it would be to implement
4. Some existing elements in the themes are repurposed to act as the toggles: Most work to implement, might not be self-explaining

Do you have any other ideas? Which of the approaches would you prefer?

[mihaigalos]

Hi @six-two, I managed to get this working:

toggle_sidebar.js - click to preview!

```js document.addEventListener("DOMContentLoaded", function() { const toggleBtn = document.createElement('button'); toggleBtn.id = 'sidebar-toggle'; toggleBtn.innerHTML = '☰'; toggleBtn.title = 'Toggle sidebar'; toggleBtn.onclick = function() { document.querySelector('.md-sidebar--primary').classList.toggle('hidden'); }; // Find the title element and insert the button after it const titleElement = document.querySelector('.md-header__title'); titleElement.parentNode.insertBefore(toggleBtn, titleElement.nextSibling); }); ```

toggle_sidebar.css - click to preview!

```css #sidebar-toggle { */ background: none; border: none; font-size: 1.5rem; cursor: pointer; color: inherit; margin-left: 1rem; margin-top: -5px; } .md-sidebar--primary.hidden { display: none; } ```

mkdocs.yaml - click to preview!

```yaml extra_css: - mkdocs/settings/stylesheets/toggle_sidebar.css extra_javascript: - mkdocs/settings/javascript/toggle_sidebar.js ```

Shows up nicely to the top right like this:

Thank you. If you want to proceed here, we can keep this open otherwise free to close. 👍

[six-two]

@mihaigalos Thanks for the code. I now export an API (see docs/javascript-functions.md). This has the benefit of working with all supported themes and saving the state (which side bars are shown or hidden).

I also played around with your code and implemented a button (for now in Material theme only) similar to it. You can include it by setting toggle_button to all, navigation or toc:

plugins:
- search
- toggle-sidebar:
    toggle_button: toc

You can try it out by installing the version from the main branch:

pip install -U git+https://github.com/six-two/mkdocs-toggle-sidebar-plugin

[six-two]

I implemented the feature for the remaining themes and released it with version 0.0.4