feat(sidebar): Improve collapsible sidebars on mobile

[gadenbuie]

Description

This PR started as a second-take on #1080 but then related changes from #1085 required a few changes on top of the approach in this PR. The end result is that we no longer attempt the "see-through" sidebar overlay on mobile with collapsible sidebars -- that approach was too subtle by default to be worth the effort. For the effect to work well, sidebars should be opaque with a small amount of transparency. We can't, in general, create that scenario as a default.

In the end, this PR is mostly #1085, please see that description for a full changelog.

Background

This PR started as a second-take on #1080:

Add missing -webkit- prefixed backdrop-filter rule for Safari. Also tweaks blur and opactiy to make the effect a little bit more subtle.

For context, the blur/opacity appears when the sidebar is collapsible on mobile. In this case, the sidebar expands to cover the content in the layout, and the goal is to give the user the sense that the covered outputs are updating when the inputs in the sidebar are changed.

Note: the next release of Safari won't require this. In general, backdrop-filter is well supported (96.57%, all major browsers in the last 2 years).

Summarizing some of the conversation in #1080, we're stuck with transparent sidebars -- it's better as a default to let the underlying colors pass through than to set a fixed opaque color for the sidebar. This creates issues when the sidebar is collapsible on mobile because the open sidebar is overlaid on the main container. Previously we used a blur effect, but were missing the -webkit- prefix to support Safari.

In #1080 I explored using color-mix() but it greatly increased the complexity with very littly benefit. Because we don't always know (i.e. have available as a CSS property) the background color of the containers underneath the sidebar container, we still rely on transparency and we end up having the same problems as listed above.

I also explored using a backdrop element below the expanded sidebar, but we again run into problems with needing to know the background color underneath the sidebar layout.

[cpsievert]

If you have one readily available, it'd be great to have an app that you've been using for testing in the commentary

[gadenbuie]

If you have one readily available, it'd be great to have an app that you've been using for testing in the commentary

Yeah, try the app from #1055. You can add an extra card into the layout_column_wrap() with a sidebar layout, giving the sidebar or main a bg value, e.g.

card(
  card_header("Layout sidebar (sets main-bg)"),
  layout_sidebar(
    sidebar = sidebar(
      width = "25%",
      style = htmltools::css(min_width="100px", max_width="250px"),
      lorem::ipsum(1, 1, 3)
    ),
    bg = "blue",
    lorem::ipsum(1, 1, 6)
  )
)