feat(sidebar): Redesign sidebar toggle and mobile layout (#798)

Co-authored-by: Carson Sievert <[email protected]>

Author: gadenbuie

NEWS.md

@@ -33,6 +33,8 @@
 
 * Improved the style and appearance of the button to enter full screen in `card()`s and `value_box()`es to better adapt to Bootstrap's dark mode. (#780)
 
+* `layout_sidebar()` received a new design. The button to collapse and expand the sidebar now appears at the top edge of the sidebar, and we now use the [arrow-bar-left](https://icons.getbootstrap.com/icons/arrow-bar-left/) icon instead of [chevron-left](https://icons.getbootstrap.com/icons/chevron-left/). On mobile devices, the sidebar now fills the `layout_sidebar()` area as an overlay, rather than expanding from above the main content area. **Note** the `max_mobile_height` argument of `sidebar()` determines the maximum height of the sidebar area on mobile, but it now only applies when `open = "always"`. (#798)
+
 ## Bug fixes
 
 * `toggle_switch()` now works correctly when called from within a Shiny module. `update_switch()` worked as expected, but `toggle_switch()` didn't apply the module's namespace to the `id` of the switch to be updated. (#769)

R/sidebar.R

@@ -50,10 +50,11 @@
 #'   color, e.g. setting `bg` chooses an appropriate `fg` color.
 #' @param class CSS classes for the sidebar container element, in addition to
 #'   the fixed `.sidebar` class.
-#' @param max_height_mobile The maximum height of the horizontal sidebar when
-#'   viewed on mobile devices. The default is `250px` unless the sidebar is
-#'   included in a [layout_sidebar()] with a specified height, in which case
-#'   the default is to take up no more than 50% of the layout container.
+#' @param max_height_mobile A [CSS length unit][htmltools::validateCssUnit()]
+#'   defining the maximum height of the horizontal sidebar when viewed on mobile
+#'   devices. Only applies to always-open sidebars that use `open = "always"`,
+#'   where by default the sidebar container is placed below the main content
+#'   container on mobile devices.
 #' @param gap A [CSS length unit][htmltools::validateCssUnit()] defining the
 #'   vertical `gap` (i.e., spacing) between adjacent elements provided to `...`.
 #' @param padding Padding within the sidebar itself. This can be a numeric
@@ -91,6 +92,11 @@ sidebar <- function(
 
   open <- rlang::arg_match(open)
 
+  if (!is.null(max_height_mobile) && open != "always") {
+    rlang::warn('The `max_height_mobile` argument only applies to when `open = "always"`.')
+    max_height_mobile <- NULL
+  }
+
   if (!is.null(id)) {
     if (length(id) != 1 || is.na(id) || !nzchar(id)) {
       rlang::abort("`id` must be a non-empty, length-1 character string or `NULL`.")
@@ -210,8 +216,6 @@ layout_sidebar <- function(
     class = "main",
     class = if (fillable) "bslib-gap-spacing",
     style = css(
-      background_color = bg,
-      color = fg,
       padding = validateCssPadding(padding),
       gap = validateCssUnit(gap)
     ),
@@ -237,8 +241,10 @@ layout_sidebar <- function(
     `data-bslib-sidebar-border-radius` = if (!is.null(border_radius)) tolower(border_radius),
     style = css(
       "--bslib-sidebar-width" = sidebar$width,
-      "--bslib-sidebar-bg" = if (!is.null(sidebar$color$bg)) sidebar$color$bg,
-      "--bslib-sidebar-fg" = if (!is.null(sidebar$color$fg)) sidebar$color$fg,
+      "--bslib-sidebar-bg" = sidebar$color$bg,
+      "--bslib-sidebar-fg" = sidebar$color$fg,
+      "--bslib-sidebar-main-fg" = fg,
+      "--bslib-sidebar-main-bg" = bg,
       "--bs-card-border-color" = border_color,
       height = validateCssUnit(height),
       "--bslib-sidebar-max-height-mobile" = max_height_mobile
@@ -291,10 +297,10 @@ sidebar_toggle <- toggle_sidebar
 
 collapse_icon <- function() {
   if (!is_installed("bsicons")) {
-    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-chevron-down collapse-icon\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"></path></svg>"
+    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-arrow-bar-left collapse-icon\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z\"></path></svg>"
     return(HTML(icon))
   }
-  bsicons::bs_icon("chevron-down", class = "collapse-icon", size = NULL)
+  bsicons::bs_icon("arrow-bar-left", class = "collapse-icon", size = NULL)
 }
 
 sidebar_init_js <- function() {