wip make the collapse icon customizable:

rstudio · Oct 12, 2023 · 899330e · 899330e
1 parent a595542
commit 899330e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/R/sidebar.R b/R/sidebar.R
@@ -45,6 +45,8 @@
 #'   wrapped in a `<header>` element with class `sidebar-title`. You can also
 #'   provide a custom [htmltools::tag()] for the title element, in which case
 #'   you'll likely want to give this element `class = "sidebar-title"`.
+#' @param collapse_icon A [htmltools::tag()] child to use for the collapse icon.
+#'   Consider using a \pkg{bsicons} icon like `bsicons::bs_icon("sliders")`.
 #' @param bg,fg A background or foreground color. If only one of either is
 #'   provided, an accessible contrasting color is provided for the opposite
 #'   color, e.g. setting `bg` chooses an appropriate `fg` color.
@@ -75,6 +77,7 @@ sidebar <- function(
   open = c("desktop", "open", "closed", "always"),
   id = NULL,
   title = NULL,
+  collapse_icon = NULL,
   bg = NULL,
   fg = NULL,
   class = NULL,
@@ -130,7 +133,7 @@ sidebar <- function(
         title = "Toggle sidebar",
         "aria-expanded" = if (open %in% c("open", "desktop")) "true" else "false",
         "aria-controls" = id,
-        collapse_icon()
+        collapse_icon %||% sidebar_collapse_icon()
       )
     }
 
@@ -293,9 +296,9 @@ toggle_sidebar <- function(id, open = NULL, session = get_current_session()) {
 #' @export
 sidebar_toggle <- toggle_sidebar
 
-collapse_icon <- function() {
+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-left collapse-icon\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"></path></svg>"
+    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-chevron-left\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"></path></svg>"
     return(HTML(icon))
   }
   bsicons::bs_icon("chevron-left", class = "collapse-icon", size = NULL)

diff --git a/inst/components/scss/sidebar.scss b/inst/components/scss/sidebar.scss
@@ -158,7 +158,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
       background-color: var(--bslib-sidebar-toggle-bg);
     }
 
-    > .collapse-icon {
+    > * {
       opacity: 0.8;
       width: var(--bslib-sidebar-icon-size);
       height: var(--bslib-sidebar-icon-size);
@@ -168,7 +168,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
       transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
     }
 
-    &:hover > .collapse-icon {
+    &:hover > * {
       opacity: 1;
     }
   }