How to hide sidebarPanel of a Shiny app for a particular tab

Question

My Shiny app has a universal sidebarPanel. I want to hide it for one particular tab, i.e. whenever the used would navigate to that tab the sidebarPanel would collapse. The code I am trying is as follows-

The UI-

library(shiny)
shinyUI(fluidPage (
  theme = shinytheme("superhero"),
  headerPanel("COVID-19 Data Visualizer"),
  sidebarPanel(
    width = 2,
    selectInput(
      "countries",
      label = "Select Countries",
      choices =
        c("B", "C", "A"),
      selected = c("A"),
      multiple = T
    ),
    submitButton(text = "View")
  ),
  mainPanel (h1(""),
             tabsetPanel(
               tabPanel(
                 "Global Status",
                 div(id="Main"),
                 plotlyOutput("figG"),
                 br(),
                 plotlyOutput("global_time"),
                 br(),
                 plotlyOutput("global_cfr"),
                 br(),
                 plotlyOutput("global_p"),
                 br(),
                 plotlyOutput("global_recov_dead")
               ),
               tabPanel(
                 "Comparative Charts",
                 plotlyOutput("fig_confirm"),
                 br(),
                 plotlyOutput("fig_dead"),
                 br(),
                 plotlyOutput("fig_recov")
               ),
               tabPanel(
                 "Ratio Analysis",
                 plotlyOutput("fig_confirm_S"),
                 br(),
                 plotlyOutput("fig_confirm_D"),
                 br(),
                 plotlyOutput("fig_Ratio"),
                 br(),
                 plotlyOutput("fig_cfr_print")
               )
             ))
))

The server part-

server <- function(input, output) {
  observeEvent(input$tabs == "Global Status", {
    shinyjs::hide(id = "Main")
  })

}

I don't really want to use the navbarPage and want single sidebarPanel for all the inputs.

A screenshot of the output I am getting-

Thanks in advance.

Answer 1

Here is an example:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(), 

  sidebarLayout(

    sidebarPanel(
      id="sidebar",
      selectInput(
        "countries", label = "Select Countries",
        choices = c("B", "C", "A"), selected = "A",
        multiple = TRUE
      )
    ),

    mainPanel(
      tabsetPanel(
        tabPanel(
          "Global status",
          sliderInput("s1", "slider 1", 0, 100, 20)
        ),
        tabPanel(
          "Comparative charts",
          sliderInput("s2", "slider 2", 0, 100, 50)
        ),
        tabPanel(
          "Ratio analysis",
          sliderInput("s3", "slider 3", 0, 100, 80)
        ),
        id = "tabset"
      ), 
      id="main"
    )
  )
)

server <- function(input, output){

  observeEvent(input[["tabset"]], {
    if(input[["tabset"]] == "Comparative charts"){
      hideElement(selector = "#sidebar")
      removeCssClass("main", "col-sm-8")
      addCssClass("main", "col-sm-12")
    }else{
      showElement(selector = "#sidebar")
      removeCssClass("main", "col-sm-12")
      addCssClass("main", "col-sm-8")
    }
  })

}

shinyApp(ui = ui, server = server)