How to remove sidebar and update the webpage after template is served

Panel
5

Ok. You can then create a custom JSComponent to toggle the sidebar

import panel as pn
import param

pn.extension()


class SidebarToggle(pn.custom.JSComponent):
    value = param.Boolean(doc="If True the sidebar is visible, if False it is hidden")

    _esm = """
export function render({ model }) {
    model.on('value', () => {
        if (model.value) {
            document.getElementById('sidebar-button').style.display = 'block';
            document.getElementById('sidebar').style.display = 'block';
        } else {
            document.getElementById('sidebar-button').style.display = 'none';
            document.getElementById('sidebar').style.display = 'none';    
        }
    });
}
"""


sidebar_toggle = SidebarToggle(value=True)

button = pn.widgets.Button(name="Remove sidebar", button_type="primary")
main = pn.pane.Markdown("# Click button to remove sidebar")


@pn.depends(button, watch=True)
def _update_main(_):
    sidebar_toggle.value = not sidebar_toggle.value

    if not sidebar_toggle.value:
        main.object = "# Click to add sidebar"
        button.name = "Add sidebar"
    else:
        button.name = "Remove sidebar"
        main.object = "# Click button to remove sidebar"


pn.template.FastListTemplate(sidebar=[sidebar_toggle], main=[pn.Column(button, main)]).servable()

Try on PY.CAFE

2 Likes