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

Question

尝试使用 Shiny dashboardplus semi-collapse 侧边栏，但遇到了一些问题，非常感谢您的建议。

可重现的脚本:

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

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

我对这个元素的 CSS 进行了大量挖掘(我的应用程序也恰好需要它)，并在 CSS 中找到了解决方案。

230px 是 Logo 跨度的默认宽度，但您的宽度似乎更长，因此您可能需要将所有出现的 230px 更改为 Logo 跨度的宽度(你应该能够通过使用检查元素并将鼠标悬停在它上面找到它)

@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;
}

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

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

(其中 styles.css 是包含此代码的 CSS 文件)到初始选项卡的 fluidPage() 的顶部(或者您呈现页面的任何内容)