Sidebar in boxes?

David Granjon

2020-07-15

boxPlus sidebar: Getting started

shinydashboardPlus comes with a new customization in the boxPlus() function to allow you to create sidebar inside boxes:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    dashboardHeaderPlus(),
    dashboardSidebar(),
    dashboardBody(
      setShadow("box"),
      fluidRow(
        boxPlus(
          title = "Closable Box with dropdown", 
          closable = TRUE, 
          status = "warning", 
          solidHeader = FALSE, 
          collapsible = TRUE,
          enable_sidebar = TRUE,
          sidebar_width = 25,
          sidebar_start_open = TRUE,
          sidebar_content = sliderInput(
           "obs", 
           "Number of observations:",
           min = 0, 
           max = 1000, 
           value = 500
          ),
          plotOutput("distPlot")
        )
      )
    )
  ),
  server = function(input, output) {
    output$distPlot <- renderPlot({
      hist(rnorm(input$obs))
    })
  }
 )

To toggle the sidebar, you just have to click on the i icon next to the collapse and close icons.

You can currently modify the width and the background color of the box sidebar. The sidebar_start_open argument allow you to control if the sidebar should be opened or collapsed at start. The box sidebar works very well to embed inputs elements such as slider inputs, as in the example above. Never use the sidebar when the box body is empty, since the sidebar height depends on the body height.

Including shiny output elements

This not exactly how I was thinking this sidebar to be used, but it is definitely possible. See below:

library(shiny)
library(shinydashboard)
library(leaflet)

map <- leaflet() %>% addTiles()

shinyApp(
  ui = dashboardPagePlus(
    dashboardHeaderPlus(),
    dashboardSidebar(),
    dashboardBody(
      setShadow("box"),
      fluidRow(
        boxPlus(
          title = "Closable Box with dropdown", 
          closable = TRUE, 
          status = "warning", 
          solidHeader = FALSE, 
          collapsible = TRUE,
          enable_sidebar = TRUE,
          sidebar_width = 25,
          sidebar_start_open = TRUE,
          sidebar_content = tagList(
            checkboxInput("somevalue", "Some value", FALSE),
            verbatimTextOutput("value")
          ),
          map
        )
      )
    )
  ),
  server = function(input, output) {
    output$value <- renderText({ input$somevalue })
  }
)

Notes

When including an image in the box sidebar and to make sure it is correctly displayed, you have to add a style attribute to the img tag as follows:

img(style = "width: 100%; height: 100%;", src = "http://i.imgur.com/aBayW5C.png")