Summary
The current sidebar uses a pmui.MenuList inside the pmui.Page sidebar drawer, which takes up significant horizontal space even when the user isn't navigating. Since the menu is only needed intermittently, we should switch to a collapsed pmui.MenuBar that saves screen real estate and keeps the focus on the main content area.
However, the sidebar also serves a second purpose: when a dashboard is loaded, components marked with metadata.sidebar are rendered inside a _sidebar_container in the sidebar. The new design must preserve a dedicated area for these dashboard sidebar widgets while still reclaiming the space consumed by the navigation menu.
Current behavior
pmui.Page(sidebar=...) renders a permanently visible sidebar containing a pmui.MenuList with nested sections (pages grouped by directory, plus "Custom Apps").
- The sidebar is always expanded, consuming ~250px of horizontal space regardless of whether the user is actively navigating.
- When a dashboard is loaded, components with
metadata.sidebar=True are placed in self._sidebar_container below the menu (see _rebuild_tile_grid in app.py:542).
Proposed behavior
- Replace the
pmui.MenuList navigation with a pmui.MenuBar (collapsed/hamburger-style menu) so navigation doesn't permanently consume horizontal space.
- When a dashboard is active and has sidebar widgets, display them in a slim side panel or drawer that can be toggled independently of the navigation menu.
- When no dashboard sidebar widgets are present, the full viewport width is available for main content.
- Navigation behavior (URL updates, page loading) should remain unchanged.
Implementation notes
- The menu structure is built in
get_sidebar() (src/panel_flowdash/app.py:919). The menu_items data structure should be compatible with pmui.MenuBar's API with minimal changes.
- Dashboard action handlers (
_on_action_edit, _on_action_rename, etc.) need to be rewired to the new component's action/event system.
- The
_refresh_sidebar_dashboards method updates the menu items dynamically, so the new component must support in-place item updates.
_sidebar_container (a pn.Column) collects sidebar-flagged widget views in _rebuild_tile_grid. The new layout needs to conditionally show a side panel when self._sidebar_views is non-empty.
Acceptance criteria
Summary
The current sidebar uses a
pmui.MenuListinside thepmui.Pagesidebar drawer, which takes up significant horizontal space even when the user isn't navigating. Since the menu is only needed intermittently, we should switch to a collapsedpmui.MenuBarthat saves screen real estate and keeps the focus on the main content area.However, the sidebar also serves a second purpose: when a dashboard is loaded, components marked with
metadata.sidebarare rendered inside a_sidebar_containerin the sidebar. The new design must preserve a dedicated area for these dashboard sidebar widgets while still reclaiming the space consumed by the navigation menu.Current behavior
pmui.Page(sidebar=...)renders a permanently visible sidebar containing apmui.MenuListwith nested sections (pages grouped by directory, plus "Custom Apps").metadata.sidebar=Trueare placed inself._sidebar_containerbelow the menu (see_rebuild_tile_gridinapp.py:542).Proposed behavior
pmui.MenuListnavigation with apmui.MenuBar(collapsed/hamburger-style menu) so navigation doesn't permanently consume horizontal space.Implementation notes
get_sidebar()(src/panel_flowdash/app.py:919). Themenu_itemsdata structure should be compatible withpmui.MenuBar's API with minimal changes._on_action_edit,_on_action_rename, etc.) need to be rewired to the new component's action/event system._refresh_sidebar_dashboardsmethod updates the menu items dynamically, so the new component must support in-place item updates._sidebar_container(apn.Column) collects sidebar-flagged widget views in_rebuild_tile_grid. The new layout needs to conditionally show a side panel whenself._sidebar_viewsis non-empty.Acceptance criteria
pmui.MenuBar