Simplify dashboard-like layouts

[cpsievert]

Right now, you'd need something like this for a (single-page) dashboard-like filling layout:

page_fillable(
    padding = 0, gap = 0,
    h2("My dashboard", class = "bg-dark p-2 mb-0"),
    layout_sidebar(
        sidebar = sidebar("side"),
        fillable = TRUE,
        border = FALSE,
        border_radius = FALSE,
        plotly::plot_ly()
    )
)

We could do more to make smarter defaults for this special situation (i.e., a single layout_sidebar() appearing as a direct child of page_fillable()), but even if we do, that may not be good enough for a basic getting started tutorial. Instead of (or addition to) smarter defaults, we may want an higher-order abstraction like:

page_sidebar(
    title = "My dashboard",
    sidebar = sidebar("side"),
    fillable = FALSE, # must opt-out of filling layout
    plotly::plot_ly()
)

This page_sidebar() API is pretty similar to how we currently recommend you create multi-page sidebar layouts. It might make sense to align these as much as possible (i.e., default to fillable = TRUE for both? Use title instead of header for both?)

page_navbar(
    title = "My dashboard",
    sidebar = sidebar("side"),
    fillable = FALSE, # must opt-out of filling layout?
    nav_panel("Plot", plotly::plot_ly())
)

Also, once we have navigation in the sidebar (see #585), maybe an API like this could also work (we'd throw if you tried to supply sidebar or non-nav items as children and use navset_sidebar() under-the-hood):

page_sidebar(
    title = "My dashboard",
    nav_panel("A", "a"),
    nav_panel("B", "b")
)

And, in the rare case you wanted both header and sidebar navigation, you'd have to start with page_navbar() (this should just fall out of #585):

page_navbar(
  title = "My dashboard",
  nav_panel(
    "Page A", 
    navset_sidebar(
      nav_panel("Topic A", "Topic A"),
      nav_panel("Topic B", "Topic B")
    )
  ),
  nav_panel(
    "Page B", 
    navset_sidebar(
      nav_panel("Topic C", "Topic C"),
      nav_panel("Topic D", "Topic D")
    )
  )
)

[cpsievert]

An MVP of the core idea behind this is done now

[github-actions]

This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.
🙋 Need help? Connect with us on Discord or Posit Community.