From 899330e6c972f4452f27b582eeb5c3ede1fc2895 Mon Sep 17 00:00:00 2001 From: Carson Date: Thu, 12 Oct 2023 16:06:48 -0500 Subject: [PATCH] wip make the collapse icon customizable: --- R/sidebar.R | 9 ++++++--- inst/components/scss/sidebar.scss | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/R/sidebar.R b/R/sidebar.R index 8709bfc0c..1967ab6c6 100644 --- a/R/sidebar.R +++ b/R/sidebar.R @@ -45,6 +45,8 @@ #' wrapped in a `
` 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 <- "" + icon <- "" 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 index 001d04647..c8ce106dd 100644 --- 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; } }