Skip to content

Commit 899330e

Browse files
committed
wip make the collapse icon customizable:
1 parent a595542 commit 899330e

File tree

2 files changed

+8
-5
lines changed

2 files changed

+8
-5
lines changed

R/sidebar.R

+6-3
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
#' wrapped in a `<header>` element with class `sidebar-title`. You can also
4646
#' provide a custom [htmltools::tag()] for the title element, in which case
4747
#' you'll likely want to give this element `class = "sidebar-title"`.
48+
#' @param collapse_icon A [htmltools::tag()] child to use for the collapse icon.
49+
#' Consider using a \pkg{bsicons} icon like `bsicons::bs_icon("sliders")`.
4850
#' @param bg,fg A background or foreground color. If only one of either is
4951
#' provided, an accessible contrasting color is provided for the opposite
5052
#' color, e.g. setting `bg` chooses an appropriate `fg` color.
@@ -75,6 +77,7 @@ sidebar <- function(
7577
open = c("desktop", "open", "closed", "always"),
7678
id = NULL,
7779
title = NULL,
80+
collapse_icon = NULL,
7881
bg = NULL,
7982
fg = NULL,
8083
class = NULL,
@@ -130,7 +133,7 @@ sidebar <- function(
130133
title = "Toggle sidebar",
131134
"aria-expanded" = if (open %in% c("open", "desktop")) "true" else "false",
132135
"aria-controls" = id,
133-
collapse_icon()
136+
collapse_icon %||% sidebar_collapse_icon()
134137
)
135138
}
136139

@@ -293,9 +296,9 @@ toggle_sidebar <- function(id, open = NULL, session = get_current_session()) {
293296
#' @export
294297
sidebar_toggle <- toggle_sidebar
295298

296-
collapse_icon <- function() {
299+
sidebar_collapse_icon <- function() {
297300
if (!is_installed("bsicons")) {
298-
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>"
301+
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>"
299302
return(HTML(icon))
300303
}
301304
bsicons::bs_icon("chevron-left", class = "collapse-icon", size = NULL)

inst/components/scss/sidebar.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
158158
background-color: var(--bslib-sidebar-toggle-bg);
159159
}
160160

161-
> .collapse-icon {
161+
> * {
162162
opacity: 0.8;
163163
width: var(--bslib-sidebar-icon-size);
164164
height: var(--bslib-sidebar-icon-size);
@@ -168,7 +168,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
168168
transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
169169
}
170170

171-
&:hover > .collapse-icon {
171+
&:hover > * {
172172
opacity: 1;
173173
}
174174
}

0 commit comments

Comments
 (0)