能否修改Shiny中折叠侧边栏的箭头？调整位置与可见性

针对你使用bslib构建的Shiny仪表盘，以下两种方案可以实现侧边栏折叠按钮的位置调整或可见度提升：

方法1：将默认折叠按钮移至侧边栏顶部 #

默认的侧边栏折叠按钮位于侧边栏底部，通过自定义CSS可以将其移动到顶部，同时可调整样式增强可见性。

修改后的完整代码如下：

library(bslib)
library(shiny)
library(ggplot2)

ui <- page_sidebar(
  title = "Example dashboard",
  # 添加自定义CSS调整折叠按钮位置与样式
  tags$style(
    HTML("
      /* 将折叠按钮移到侧边栏顶部 */
      .bslib-sidebar-toggle {
        top: 1rem !important;
        bottom: auto !important;
        /* 可选：增大按钮尺寸提升可见度 */
        width: 30px;
        height: 30px;
        font-size: 18px;
      }
      /* 调整侧边栏内容的上边距，避免被按钮遮挡 */
      .bslib-sidebar-content {
        margin-top: 3rem;
      }
    ")
  ),
  sidebar = sidebar(
    varSelectInput("var", "Select variable", mtcars)
  ),
  card(
    full_screen = TRUE,
    card_header("My plot"),
    plotOutput("p")
  )
)

server <- function(input, output) {
  output$p <- renderPlot({
    ggplot(mtcars) + geom_histogram(aes(!!input$var))
  })
}

shinyApp(ui, server)

方法2：在侧边栏顶部添加额外折叠按钮 #

如果希望更直观的折叠入口，可以在侧边栏顶部新增一个显眼的折叠按钮，配合shinyjs和bslib的update_sidebar函数实现状态切换。

完整代码如下：

library(bslib)
library(shiny)
library(ggplot2)
library(shinyjs)

ui <- page_sidebar(
  title = "Example dashboard",
  # 启用shinyjs
  useShinyjs(),
  sidebar = sidebar(
    id = "main_sidebar", # 给侧边栏设置ID，用于控制折叠状态
    # 在顶部添加自定义折叠按钮
    actionButton(
      "toggle_sidebar", "折叠/展开侧边栏",
      class = "btn-primary mb-3"
    ),
    varSelectInput("var", "Select variable", mtcars)
  ),
  card(
    full_screen = TRUE,
    card_header("My plot"),
    plotOutput("p")
  )
)

server <- function(input, output, session) {
  output$p <- renderPlot({
    ggplot(mtcars) + geom_histogram(aes(!!input$var))
  })
  
  # 点击自定义按钮时切换侧边栏折叠状态
  observeEvent(input$toggle_sidebar, {
    current_state <- input$main_sidebar_collapsed
    update_sidebar("main_sidebar", collapsed = !current_state)
  })
}

shinyApp(ui, server)

内容的提问来源于stack exchange，提问作者ashcrashbegash