Programatically / dynamically hiding template sidebar?

Is there a way to trigger the sidebar button?
image

you can call openNav() anc closeNav() from javascript. One way is to create an dummy html pane and change the object.

import panel as pn

html = pn.pane.HTML("")
button_open = pn.widgets.Button(name="openNav")
button_close = pn.widgets.Button(name="closeNav")

def open(event):
    html.object = f""" <script> openNav(); </script>"""
button_open.on_click(open)

def close(event):
    html.object = f""" <script> closeNav(); </script>"""
button_close.on_click(close)

vanilla = pn.template.VanillaTemplate(title='toogle_nav')
vanilla.sidebar.append(html)
vanilla.main.append(button_open)
vanilla.main.append(button_close)

pn.serve(vanilla)
3 Likes

Is there a way to do the equivalent in the Material template, to close the nav / sidebar after its populated with some panel objects?

There is a little snippet of javascript in the template definition, but not obvious to me how to engage?

from panel/material.html at 776a25dac6f4b3e131b5c909b4e8e0b4058e120b · holoviz/panel · GitHub

{% if nav %}
var drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector(’.mdc-drawer’));
var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById(‘header’));
topAppBar.setScrollTarget(document.getElementById(‘main’));
topAppBar.listen(‘MDCTopAppBar:nav’, function() {
drawer.open = !drawer.open;
// Ensure bokeh layout recomputes layout
window.dispatchEvent(new Event(‘resize’));
});

drawer.open = true;
{% endif %}

Thanks for any help

John

1 Like