Search code examples
shinydashboard

shiny - how to disable the dashboardHeader


I am new to shiny. When I made my project, I need to hide the dashboardHeader in server side.

In the shinydashboard website, I found the code dashboardHeader(disable = TRUE). I tried this, but it was not work.

However, I tried use shinyjs to solve the problem.

    <code>

    library(shiny)
    library(shinydashboard)
    library(shinyjs)

    ui <- dashboardPage(
          dashboardHeader(
                extendShinyjs(text = 'shinyjs.hidehead = function(params) {           
                $("header").addClass("sidebar-collapse") }'),
                          ),
          dashboardSidebar(),
          dashboardBody(
              actionButton("button","hide_header",width = 4 )
                       )
                       )

    server <- function(input, output) {
         observeEvent(input$button, {
                       js$hidehead()           
                  })}

   shinyApp(ui, server)</code>

I guess you already known, it still not worked.

Any ideas for my case?


Solution

  • Shinyjs is a great library. The problem with your code is that you need first to initialize shinyjs with shinyjs::useShinyjs() and put it inside the dashboarBody function. Also, to hide/show the header you don't need to add the class "sidebar-collapse" that is actually for the sidebar. You only need to add style="display:none" to hide the header, and remove it to show the header. Below is your code modified to hide/show the header. The JS code used is very simple and it receive the parameter to add directly from the js$hidehead() function.

    library(shiny)
    library(shinydashboard)
    library(shinyjs)
    
    ui <- dashboardPage(
            dashboardHeader(),
            dashboardSidebar(),
            dashboardBody(
              # initialize shinyjs
              shinyjs::useShinyjs(),
              # add custom JS code
              extendShinyjs(text = "shinyjs.hidehead = function(parm){
                                        $('header').css('display', parm);
                                    }"),
              actionButton("button","hide header"),
              actionButton("button2","show header")
            )
          )
    
    server <- function(input, output) {
      observeEvent(input$button, {
        js$hidehead('none')           
      })
      observeEvent(input$button2, {
        js$hidehead('')           
      })
    }
    
    shinyApp(ui, server)