Create conditionally visible side panels in shiny

Question

In R and shiny I would like to use tabs in shinydashboard . The control panel usually has a sidebar, but for one tab, I would like the sidebar to disappear to give more screen space in the body of the page.

I know there are conditional panels, but is it possible to adjust the visibility of the sidebar when the tab is activated?

Below is some mock code for setting up a shinydashboard with three tabs and a sidebar.

 library(shiny) library(shinydashboard) ui <- dashboardPage( dashboardHeader(), # I would like to make the sidebar not visible if the third tab is selected... # something like... #if(input.tabs==3){dashboardSidebar(disable = TRUE)}else{dashboardSidebar()}, dashboardSidebar(), if(input.tabs==3){dashboardSidebar(disable = TRUE)}else{dashboardSidebar()}, dashboardBody( fluidRow( column(width=12, tabsetPanel(id='tabs' tabPanel('tab1', plotOutput('plot1'),value=1), tabPanel('tab2', plotOutput('plot2'),value=2), tabPanel('tab3', plotOutput('plot3'),value=3) ) )) ) ) server <- function(input, output) { output$plot1 <- renderPlot({ out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ geom_density(fill='light blue')+ theme_minimal() print(out) }) output$plot2 <- renderPlot({ out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ geom_density(fill='light blue')+ theme_minimal() print(out) }) output$plot3 <- renderPlot({ out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ geom_density(fill='light blue')+ theme_minimal() print(out) }) } shinyApp(ui, server) 

Answer 1

I never used dashboards until 5 minutes ago when I saw this question, so this may not be the best answer, but it works.

It appears that when you manually “hide” the sidebar, the body tag gets the “sidebar-collapse” class. So I decided to add javascript that adds this class to the body tag when the third tab is selected. The only drawback is that if you select a different tab, the side panel will not re-expand, it will remain hidden until you manually close it again.

Disclaimer: in my answer I use the package I wrote, shinyjs.

Here is a brilliant app:

 library(shiny) library(shinydashboard) library(ggplot2) library(shinyjs) ui <- dashboardPage( dashboardHeader(), dashboardSidebar(), dashboardBody( useShinyjs(), extendShinyjs("app.js"), fluidRow( column(width=12, tabsetPanel(id='tabs', tabPanel('tab1', plotOutput('plot1'),value=1), tabPanel('tab2', plotOutput('plot2'),value=2), tabPanel('tab3', plotOutput('plot3'),value=3) ) )) ) ) server <- function(input, output, session) { output$plot1 <- renderPlot({ out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ geom_density(fill='light blue')+ theme_minimal() print(out) }) output$plot2 <- renderPlot({ out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ geom_density(fill='light blue')+ theme_minimal() print(out) }) output$plot3 <- renderPlot({ out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ geom_density(fill='light blue')+ theme_minimal() print(out) }) observe({ if (input$tabs == 3) { js$hideSidebar() } }) } shinyApp(ui, server) 

I added only a few lines to the application: I added calls to useShinyjs() and extendShinyjs("app.js") in the user interface, and I added observe({ if (input$tabs == 3) js$hideSidebar() }) to the server. I also added a session parameter to the server function. You will also need to add a javascript file called "app.js" that contains the following line:

 shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse") } 

You can also avoid using shinyjs and use brilliant normal messaging to call a similar javascript function.

EDIT: with the latest version of shinyjs 0.0.6.1 you do not need to use a separate file if you prefer to provide javascript inline code. Just replace the call with extendShinyjs("app.js") with

 extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse") }')