Programatically / dynamically hiding template sidebar?

Panel
#1

Is there a way to trigger the sidebar button?
image

#2

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)

closenav

3 Likes
#3

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