rshinyshinyjs

How to collapse sidebarPanel in shiny app?


I have a shiny app with a mainPanel and a sidebarPanel inside a tabPanel in a navbarPage. I need an option to hide the sidebarPanel similar to this: Hide sidebar in default in shinydashboard and https://github.com/daattali/shinyjs/issues/43.

An actionButton should control if the sidebarPanel is shown or collapsed.

This is the code:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  navbarPage("",
             tabPanel("tab",
                      sidebarPanel(
                        useShinyjs()
                      ),
                  
                      mainPanel(actionButton("showSidebar", "Show sidebar"),
                                actionButton("hideSidebar", "Hide sidebar")
                      )
             )
  )
)

server <-function(input, output, session) {
  observeEvent(input$showSidebar, {
    shinyjs::removeClass(selector = "body", class = "sidebarPanel-collapse")
  })
  observeEvent(input$hideSidebar, {
    shinyjs::addClass(selector = "body", class = "sidebarPanel-collapse")
  })
}

shinyApp(ui, server)

Solution

  • I have modified your code to hide and show the sidebar. To create the id for the sidebarPanelI have enclosed it within div and given it theid = Sidebar. To show and hide the side bar I have used shinyjs function show and hide with the id as Sidebar.

    library(shiny)
    library(shinyjs)
    
    ui <- fluidPage(
      useShinyjs(),
      navbarPage("",
                 tabPanel("tab",
                          div( id ="Sidebar",sidebarPanel(
                          )),
                          
                          
                          mainPanel(actionButton("showSidebar", "Show sidebar"),
                                    actionButton("hideSidebar", "Hide sidebar")
                          )
                 )
      )
    )
    
    server <-function(input, output, session) {
      observeEvent(input$showSidebar, {
        shinyjs::show(id = "Sidebar")
      })
      observeEvent(input$hideSidebar, {
        shinyjs::hide(id = "Sidebar")
      })
    }
    
    shinyApp(ui, server)