How to Collapse Sidebarpanel in Shiny App

How to collapse sidebarPanel in shiny app?

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)

R shiny collapsible sidebar

The part that is not visible that you mention is in fact the empty title parameter that you have "". Leaving this out as below places the toggle button in the title position:

 library(shiny)
 library(shinyjs)

 ui <- fluidPage(
 useShinyjs(),
 navbarPage(actionButton("toggleSidebar", "toggle", icon = 
 icon("database")),
          tabPanel("tab",
                  div( id ="Sidebar",sidebarPanel(
                  )),mainPanel() )))

   server <-function(input, output, session) {
   observeEvent(input$toggleSidebar, {
   shinyjs::toggle(id = "Sidebar")
  }) }

 shinyApp(ui, server)

How to minimize a sidebarLayout in a Shiny App?

Because you didn't use shinydashboard. The box comes from shinydashboard package. You need to use shinydashboard::dashboardPage instead of fluidPage.
dashboardPage Loads required javascripts and CSS files to toggle the button.

library(shiny)
ui <- shinydashboard::dashboardPage(
    shinydashboard::dashboardHeader(),
    shinydashboard::dashboardSidebar(),
    shinydashboard::dashboardBody(
        headerPanel("Here goes the heder"),
        shinydashboard::box(
            width = 12,
            title = "BB",
            collapsible = TRUE,
            collapsed = FALSE,
            sidebarLayout(
                sidebarPanel(textOutput("someinputs")),
                mainPanel(textOutput("someoutputs")))
        ) 
    )
)

If you don't want to use dashboardPage, you can write your own scripts to control the button:

library(magrittr)
library(shiny)
ui <- fluidPage(
    headerPanel("Here goes the heder"),
    shinydashboard::box(
        width = 12,
        title = "BB",
        collapsible = TRUE,
        collapsed = FALSE,
        sidebarLayout(
            sidebarPanel(textOutput("someinputs")),
            mainPanel(textOutput("someoutputs")))
    )%>% {.$attribs[['id']] <- 'example-box'; .},
    tags$head(tags$script(
        "$(document).ready(function(){
          $('#example-box button').attr({
            'data-toggle':'collapse', 
            'data-target':'#example-box .box-body', 
            'aria-expanded':false
          })
        })"
    ))
)

I used a hack to assign an ID to the box %>% {.$attribs[['id']] <- 'example-box'; .}, and use some jquery to control the button. Be sure the ID in the script matches the ID you assign in UI, example-box in this case. In javascript, you add # for ID searching, so #example-box.

I wouldn't recommend you to use the second way. You can see in your UI, it's not really a box. It has no border and the button is not at the right place. If you use dashboardPage, you can see the difference.

Collapse sidebarpanel in Shiny for a particular tab

I am not really sure you really need to "hide" or just specify for some tabs a sidebar and for some not (see the ui part).
In case you need to hide a sidebar see the (commented) server part.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  navbarPage("",
             tabPanel("tab",
                      div( id ="Sidebar",sidebarPanel(
                        actionButton("showSidebar", "I am tab sidebar content")
                      )),

                      mainPanel(actionButton("showSidebar", "I am tab main content")
                      )
             ),
             tabPanel("tab2",
                      div( id ="Sidebar2",sidebarPanel(
                        actionButton("showSidebar", "I am tab2 sidebar content")
                      )),

                      mainPanel(actionButton("showSidebar", "I am tab2 main content")
                      )
             ),
             tabPanel("tab3",
                      mainPanel(actionButton("showSidebar", "I dont have a sidebar")
                      )
             )

  )
)

server <-function(input, output, session) {
  # In case you need to hide them for some reason
  # observeEvent(input$tabs == "tab", {
  #   shinyjs::hide(id = "Sidebar")
  # })
}

shinyApp(ui, server)  

Is there a way to collapse the sidebar by default

Here is a UI based solution which avoids flashing the sidebarPanel on startup:

library(shiny)
library(shinyjs)

ui <- fluidPage(useShinyjs(),
                navbarPage("",
                           tabPanel(
                             "tab",
                             div(id = "sidebarWrapper", sidebarPanel(), style = "display: none;"),
                             mainPanel(actionButton("toggleSidebar", "Toggle sidebar"))
                           )))

server <- function(input, output, session) {
  observeEvent(input$toggleSidebar, {
    shinyjs::toggle(id = "sidebarWrapper")
  })
}

shinyApp(ui, server)

PS: the same can be achived by using shinyjs::hidden(div(<...>)).

Rstudio shiny collapsible sidePanel

Only a partial solution but ... if you wrap the div below around the content or your sidebarPanel

div(id = "demo", class = "collapse in", 

)

and then put a button in your main panel as follows

HTML("<button type='button' class='btn btn-danger' data-toggle='collapse' data-target='#demo'>simple collapsible</button>"),

you can collapse the content of the sidebarPanel. This doesn't expand the main panel to take up all the screen however.

---

Related Topics