Hi everyone,
I am trying to implement a responsive layout using panel-material-ui (pmui) where the application’s sidebar state adapts to the user’s device on page load:
- On Desktop (Large Screens): The sidebar should be initially Open by default.
- On Mobile (Small Screens): The sidebar should be initially Closed by default to save screen space.
What I Tried (MRE)
I used pmui.BreakpointSwitcher to switch between two pmui.Page instances, explicitly setting sidebar_open=False for the mobile view and sidebar_open=True for the desktop view.
import panel as pn
import panel_material_ui as pmui
def get_page(sidebar_open):
return pmui.Page(
sidebar=[pn.Column("## Sidebar")],
main=[pn.Column("## Main Content")],
sidebar_open=sidebar_open,
)
layout = pmui.BreakpointSwitcher(
small=get_page(sidebar_open=False),
large=get_page(sidebar_open=True),
breakpoint="md",
)
pn.serve(layout)
When I serve the application and open it on a desktop, the sidebar is opened as wanted.
But viewing on mobile device a zoomed-out page layout is shown and the sidebar is also open.
Has anyone found a way to ensure the sidebar starts in a closed state specifically for mobile viewports?
Environment:
panel==1.8.10
panel-material-ui==0.9.1
Thanks for any insights!