Skip to content

Replace sidebar MenuList with collapsed MenuBar #2

Description

@philippjfr

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

  • Navigation menu is replaced with a collapsed pmui.MenuBar
  • All page navigation still works (URL routing, active state)
  • Dashboard CRUD actions (create, rename, delete, edit) still function
  • Dashboard sidebar widgets still render in a dedicated side area when present
  • Main content area uses full width when no sidebar widgets are active and menu is collapsed
  • No regressions in existing UI tests

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions