Hide left and right sidebars by default when specific tab is selected in shinydashboard

Question

I have a shiny dashboard below and I would like to know if there is a way to keep left and right sidebar hidden by default when a specific tab is selected. In this case the tab 'Front'

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
ui <- tags$body(class="skin-blue sidebar-mini control-sidebar-open",dashboardPagePlus(
  dashboardHeaderPlus(
    enable_rightsidebar = TRUE,
    rightSidebarIcon = "gears",
    fixed = T
  ),
  dashboardSidebar(

  ),
  dashboardBody(
    tags$hr(),
    tabsetPanel(
      id ="tabA",
      type = "tabs",
      tabPanel("Front",icon = icon("accusoft")),
      tabPanel("Data", icon = icon("table")


    )
  )
),
rightsidebar = rightSidebar(

)))

server <- function(input, output) {


}

shinyApp(ui = ui, server = server)

lz100 · Accepted Answer · 2020-03-20T06:06:04.660

Do it by shinyjs. Watch how I do by addClass removeClass, Check it out.

Left right bar closed when you are on “Front” and open on "Data" tab.

        ## app.R ##
        library(shiny)
        library(shinydashboard)
        library(shinydashboardPlus)
        library(DT)
        library(shinyWidgets)
        library(shinyjs)
        ui <- dashboardPagePlus(
            dashboardHeaderPlus(
                enable_rightsidebar = TRUE,
                rightSidebarIcon = "gears",
                fixed = T
            ),

            dashboardSidebar(
            ),

            dashboardBody(
                useShinyjs(),
                tags$hr(),
                tabsetPanel(
                    id ="tabA",
                    type = "tabs",
                    tabPanel("Front",icon = icon("accusoft")),
                    tabPanel("Data", icon = icon("table")


                    )
                )
            ),
            rightsidebar = rightSidebar(

            )
        )

        server <- function(input, output) {
            observe({
               if (input$tabA == "Front") {
                   addClass(selector = "body", class = "sidebar-collapse")
                   removeClass(selector = "body", class = "control-sidebar-open")
               } else {
                   removeClass(selector = "body", class = "sidebar-collapse")
                   addClass(selector = "body", class = "control-sidebar-open")
               }
            })
        }

        shinyApp(ui = ui, server = server)

To answer your additional question in comment:

I inspected the document, there is no ID for the right sidebar menu, so I can't use shiny functions to change that one, unless you change the source code of shinydashboardPlus to give it an ID at initiation, but it will be very tricky.
I add some javascript runjs to sneakily hide the right side menu and add a button on "Front". When you click it, the right bar will show up.

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
library(shinyjs)
ui <- dashboardPagePlus(
    dashboardHeaderPlus(
        enable_rightsidebar = TRUE,
        fixed = T

    ),

    dashboardSidebar(
    ),

    dashboardBody(
        useShinyjs(),
        tags$hr(),
        tabsetPanel(
            id ="tabA",
            type = "tabs",
            tabPanel(title = "Front", icon = icon("accusoft"),
                actionButton(inputId = "openright", label = "Open Right")
                     ),
            tabPanel("Data", icon = icon("table")

            )
        )
    ),
    rightsidebar = rightSidebar(

    )
)

server <- function(input, output) {

    observe({
        runjs('document.querySelectorAll(".navbar-custom-menu")[1].style.visibility = "hidden"')
        if (input$tabA == "Front") {
            addClass(selector = "body", class = "sidebar-collapse")
            removeClass(selector = "body", class = "control-sidebar-open")
        } else {
            removeClass(selector = "body", class = "sidebar-collapse")
            addClass(selector = "body", class = "control-sidebar-open")
        }
    })
    observeEvent(input$openright, {addClass(selector = "body", class = "control-sidebar-open")})
}

shinyApp(ui = ui, server = server)

is there a way to also hide the 'gear' icons and the ability to open the right sidebar at all from the "Front"? — firmo23, Mar 19 '20 at 02:39
interesting but I would like this totally disabled. There is no point being displayed empty and its confusing for the user. — firmo23, Mar 20 '20 at 01:26
I don't understand this part. You want a button to remove the right sidebar? — lz100, Mar 20 '20 at 06:04
https://stackoverflow.com/questions/60760263/disable-right-sidebar-ability-at-all-for-a-specific-tab-of-a-shiny-dashboard/60773344#60773344 — firmo23, Mar 20 '20 at 21:12

Hide left and right sidebars by default when specific tab is selected in shinydashboard

1 Answers1