重新设计了半折叠式侧边栏-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()顶部（或呈现页面的任何内容）