Closed gadenbuie closed 1 month ago
If you have one readily available, it'd be great to have an app that you've been using for testing in the commentary
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)
)
)
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:
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.