Shinydashboard：折叠主标题标题和侧边栏

Question

我目前正在使用R包Shinydashboard（基于AdminLTE）在仪表板上工作。 我想通过按下切换按钮（3）as seen here来切换主标题标题（2）和侧边栏（1）。

请参见下面的最小代码段，以举例说明我在说什么。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Toggle this!"),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

任何帮助将不胜感激。 如果您知道如何通过编辑基础HTML来解决问题，那么也非常欢迎。

Answer 1

通过shinydashboardPlus，您可以部分折叠边栏和标题。只需将dashboardPage更改为dashboardPagePlus，将dashboardHeader更改为dashboardHeaderPlus。一切保持不变，您也可以折叠标题。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPagePlus(
  dashboardHeaderPlus(title = "Toggle this!"),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

但是，它不会完全折叠标题或边栏。它留出一些空间来显示图标，这很有用。但是，如果要完全折叠标题和侧栏，则需要使用JavaScript。旁注：dashboardPagePlus有一个自变量collapse_sidebar，当设置为TRUE时，它将完全折叠边栏，但是标题保留在原处。要完全移动两者，请使用下面的代码。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)


jscode <- HTML("
$(document).on('shiny:connected', function(event) {
  $('.sidebar-toggle').on('click', function() {
    if ($('body')[0].className != 'skin-blue sidebar-mini sidebar-collapse') {
      $('#sidebarCollapsed').css('display', 'none')
      $('nav.navbar-static-top').css('width', '1800px')
      $('nav.navbar-static-top').css('margin-left', '0px')
      $('header.main-header').css('width', '1800px')
      $('.sidebar-toggle').css('position', 'relative')
      $('span.logo').css('display', 'none')
    } else {
      $('#sidebarCollapsed').css('display', 'block')
      $('nav.navbar-static-top').css('margin-left', '230px')
      $('header.main-header').css('width', '884.44px')
      $('nav.navbar-static-top').css('width', '1800.44px')
      $('span.logo').css('display', 'block')
    }
  })
});
")

csscode <- HTML("
.sidebar-mini.sidebar-collapse .content-wrapper {
      margin-left: 0px !important;
}")



ui <- dashboardPagePlus(
  dashboardHeaderPlus(title = "Toggle this!"),
  dashboardSidebar(collapsed = TRUE,
                   tags$head(tags$script(jscode)),
                   tags$head(tags$style(csscode))                   
                   ),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)