Search code examples
rshinyshinydashboardshinydashboardplus

Hide and show sidebars based on chosen tabPanel in shinydashboard


I have the shinydashboard below in which I have 3 tabPanels. In the 1st tabPanel "Resource Allocation" I want the left and right sidebar open by default. In the 2nd and 3rd tabpanels ("Time Series","Longitudinal View") I want only left sidebar and the right sidebar not just hidden but to not be able to open at all by pushing the "gears" icon above it which should be removed. And in the fourth panel "User Guide" I want no sidebar and no choise to open one of them at all.

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

shinyApp(
  ui = dashboardPage(
    options = list(sidebarExpandOnHover = TRUE),
    header = dashboardHeader(
      titleWidth = "0px"

    ),
    sidebar = dashboardSidebar(minified = TRUE, collapsed = F),
    body = dashboardBody(
      useShinyjs(),#tags$head(tags$script(src="format_number.js")),
      tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),
      tabsetPanel(
        tabPanel("Resource Allocation"),
        tabPanel("Time Series"),
        tabPanel("Longitudinal View"),
        tabPanel("User Guide")
      )
    ),
    controlbar = dashboardControlbar(collapsed = F),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

Solution

  • I have a solution for the left sidebar. I am sure you can spend sometime and figure out the solution for the right sidebar. Please note that this requires some more work to fine tune to your needs. Try this

    library(shiny)
    library(shinydashboard)
    library(shinydashboardPlus)
    library(shinyjs)
    library(DT)
    
    ui <- shinydashboardPlus::dashboardPage(
      options = list(sidebarExpandOnHover = TRUE),
      shinydashboardPlus::dashboardHeader(
        #titleWidth = "0px"
      ),
      shinydashboardPlus::dashboardSidebar( disable = TRUE ,
        sidebarMenu(
        selectInput(
          "countries", label = "Select Countries",
          choices = c("B", "C", "A"), selected = "A",
          multiple = TRUE
        ))
      ),# minified = TRUE, collapsed = F),
      controlbar = shinydashboardPlus::dashboardControlbar(id = "controlbar", collapsed = F, 
                          skin = "dark",
                          controlbarMenu(
                            id = "menu",
                            controlbarItem(
                              "Tab 1",
                              "Welcome to tab 1"
                            ),
                            controlbarItem(
                              "Tab 2",
                              "Welcome to tab 2"
                            )
                          )
      ),
    
      shinydashboard::dashboardBody(
        useShinyjs(),
        tabsetPanel( id="tabset",
                     tabPanel("Resource Allocation", value="tab1", plotOutput("plot")),
                     tabPanel("Time Series", value="tab2", plotOutput("plot2")),
                     tabPanel("Longitudinal View", value="tab3", DTOutput("ir")),
                     tabPanel("User Guide", value="tab4", DTOutput("mt"))
        )
      ),
      # controlbar = dashboardControlbar(collapsed = F),
      title = "DashboardPage"
    )
    server <- function(input, output) {
      output$plot <- renderPlot(plot(cars))
      output$plot2 <- renderPlot(plot(pressure))
      output$mt <- renderDT(mtcars)
      output$ir <- renderDT(iris)
    
      observeEvent(input[["tabset"]], {
        if(input[["tabset"]] == "tab4"){
          addClass(selector = "body", class = "sidebar-collapse")
          updateControlbar("controlbar")
        }else{
          removeClass(selector = "body", class = "sidebar-collapse")
        }
      })
    
    }
    
    shinyApp(ui, server)