重新设计的半折叠侧边栏 - R shinydashboardplus答案

【问题标题】：Semi-collapsed sidebar re-designed - R shiny dashboardplus重新设计的半折叠侧边栏 - R shinydashboardplus
【发布时间】：2020-02-25 05:57:11
【问题描述】：

尝试使用 Shiny dashboardplus 半折叠侧边栏，但遇到了一些问题，希望得到您的建议。

可重现的脚本：

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 切换侧边栏按钮，并在侧边栏右上角添加了一个新按钮。（注意，即使我使用默认的，它最终也是同样的问题）当单击折叠侧边栏时，侧边栏本身按预期半折叠。但是，我也想

半折叠时删除侧边栏中的项目。
将“项目列表”垂直添加到半折叠侧边栏。
保持标题不变，不要折叠

下面我首先展示它现在是什么以及我想要它成为什么。非常感谢您的帮助！

【问题讨论】：

标签： javascript css r shiny shinydashboard

【解决方案1】：

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

我对这个项目的 CSS 做了很多挖掘（我的应用程序也碰巧需要这个），并在 CSS 中找到了解决方案。

230px 是徽标跨度的默认宽度，但您的似乎更长，因此您可能必须将所有出现的 230px 更改为徽标跨度的宽度（您应该能够通过使用检查元素并将鼠标悬停在其上）

@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() （或您呈现页面的任何内容）

【讨论】：