Shinydashboard: collapse main-header-title together with sidebar

Question

I am currently working on a dashboard with the R package shinydashboard (based on AdminLTE). I would like to toggle the main header title (2) together with the sidebar (1) by pressing the toggle button (3) as seen here.

See below a minimal code snippet to exemplify what I am talking about.

library(shiny)
library(shinydashboard)

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

server <- function(input, output) { }

shinyApp(ui, server)

Any help is greatly appreciated. If you know how to solve the problem by editing the underlying HTML, that´s highly welcome aswell.

user_9778946 · Answer

The shinydashboardPlus allows you to partially collapse the sidebar and the header. Simply change the dashboardPage to dashboardPagePlus and dashboardHeader to dashboardHeaderPlus. Leave everything the same and you will be able to collapse the header as well.

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

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

server <- function(input, output) { }

shinyApp(ui, server)

However, it does not fully collapse the header nor the sidebar. It leaves some space to show icons, which is useful. But if you want to fully collapse the header and the sidebar you need to use JavaScript. Sidenote: dashboardPagePlus has an argument collapse_sidebar, which when set to TRUE will fully collapse the sidebar, however, the header stays in place. To move both completely, use the following code below.

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)

Shinydashboard: collapse main-header-title together with sidebar

1 Answers