javascript - 半折叠闪亮的仪表板侧边栏，不使用标题中给定的切换

Question

尝试为闪亮的仪表板添加一些个性化设计 - 而不是使用仪表板标题中的侧边栏切换来折叠和展开侧边栏，我希望将侧边栏中的这个控件本身作为一个按钮，并让它只做半崩溃。见下文：

我已经实现了顶部（默认侧边栏切换禁用，按钮可以完全折叠侧边栏）并希望在单击按钮时侧边栏半折叠，如下所示。

请注意，标题中的侧边栏切换通常如下所示：

可重现的代码如下：

library("shiny")
library("htmltools")
library("shinydashboard")
library("shinyjs")

# UI Page Starts
ui = dashboardPage(  
  skin = "black",

  dashboardHeader(
    title = "Title"
  ),


  dashboardSidebar(
    width = 250,
    fluidRow(
      useShinyjs(),
      column(8, align = "left", offset = 0, 
             style='padding-left: 28px;  padding-top: 10px', 
             h4(HTML(paste0("Project Lists")))),
      column(2, align = "left", offset = 0, 
             style='padding-top: 5px',
             actionButton("hideSidebar", icon("th"), style = "padding-top: 12px;")
      )
    ),

    # Remove the sidebar toggle element
    tags$script(JS("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"))
  ),

  dashboardBody(
    tabBox(
      title = NULL, width = 12,
      id = "tabset1", height = "700px"
    )
  )
)


#Server
server = function(input, output, session) {

  #side bar  
  observeEvent(input$hideSidebar, {
    shinyjs::addClass(selector = "body", class = "sidebar-collapse")
  })
}

#
shinyApp(ui = ui, server = server)

任何建议表示赞赏。非常感谢！

标签： javascriptcssrshinyshinydashboard