重新设计的半折叠侧边栏-R闪亮的仪表板

Question

[尝试使用Shiny仪表盘加半折叠侧边栏，但遇到了一些问题，希望您提出建议。

可复制的脚本：

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


# UI Page Starts
ui = dashboardPagePlus(

  title = "Shiny App",

  dashboardHeader(
    title = "Title with A Few Other Things",
    titleWidth = 530
  ),

  dashboardSidebar(
    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("toggleSidebar", icon("th"), style = "padding-top: 12px;")
      )
    ),

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

    fluidRow(
      h4(HTML(paste0("Contents that are not supposed to show when collapsed.")))
    )
  ),

  dashboardBody()
)



#Server
server = function(input, output, session) {
  #side bar  
  observeEvent(input$toggleSidebar, {
    shinyjs::toggleClass(selector = "body", class = "sidebar-collapse")
  })
}

#
shinyApp(ui = ui, server = server)

在此示例中，我删除了默认的dashboardplus切换侧边栏按钮，并在侧边栏右上方添加了一个新按钮。 （值得注意的是，即使我使用了默认值，也最终会遇到相同的问题。）单击以折叠边栏时，边栏本身会按预期半折叠。但是，我也想

1. 半折叠时，请清除边栏中的项目。
2. 将“项目列表”垂直添加到半折叠的侧边栏。
3. 保留标题，不折叠

[在下面，我首先显示现在的状态以及我想要的状态。非常感谢您的帮助！

Answer 1

这不是您所有问题的完整答案，但至少是部分解决徽标/标题问题的答案。

我在此项目的CSS上做了很多研究（我的应用程序也碰巧需要它，并在CSS中找到了解决方案。

230px是徽标跨度的默认宽度，但是您似乎更长一些，因此您可能必须用徽标跨度的宽度来更改所有出现的230px（您应该可以通过使用inspect找到它元素并悬停在其上）

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: 230px;
  }
}
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .main-header .navbar {
    margin-left: 230px !important;
  }
}

@media (max-width: 767px) {
  .main-header .logo, .main-header .navbar {
    width: 100% !important;
    float: none;
  }
}

.main-header .logo {
  width: 230px;
}

如果您不知道如何在闪亮的应用程序中获取CSS文件，则可以添加

tags$head(
  includeCSS("styles.css")
)

（（styles.css是您的CSS文件，包括以下代码）到初始标签的fluidPage()顶部（或呈现页面的任何内容）]