R shiny collapsible sidebar

Question

I have created the following application template in R shiny :

 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)

The App will create a toggle button in the sidebar. The button should appear in the navbar and not above the sidebar. The actual toggle button appears above next to the word tab. It is however, not visible.

There is one too many )'s after mainPanel(). – Eli Berkow Jul 02 '19 at 12:17 — Eli Berkow, Jul 02 '19 at 12:17

Eli Berkow · Accepted Answer · 2020-04-28T13:21:29.997

5

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)

edited Apr 28 '20 at 13:21

answered Jul 02 '19 at 12:34

Eli Berkow

2,628
1
12
22

I used the icon 'bars' because that is more standard. – Joe Flack Jun 12 '21 at 19:44
I didn't change from what the question had but agreed. – Eli Berkow Jun 14 '21 at 09:06

Takuro Ikeda · Answer 2 · 2021-07-21T12:51:55.113

I made an example with multiple tabPanels.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  navbarPage(title = tagList("title",actionLink("sidebar_button","",icon = icon("bars"))),
             id = "navbarID",
             tabPanel("tab1",
                      div(class="sidebar"
                          ,sidebarPanel("sidebar1")
                      ),
                      mainPanel(
                        "MainPanel1"
                      )
             ),
             tabPanel("tab2",
                      div(class="sidebar"
                          ,sidebarPanel("sidebar2")
                      ),
                      mainPanel(
                        "MainPanel2"
                      )
             )
  )
)

server <-function(input, output, session) {
  
  observeEvent(input$sidebar_button,{
    shinyjs::toggle(selector = ".sidebar")
  })
  
}

shinyApp(ui, server)

=======================================

I have created a simpler example that does not use the sidepanel class, but I am not sure if it will work in all environments.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  navbarPage(title = tagList("title",actionLink("sidebar_button","",icon = icon("bars"))),
             tabPanel("tab1",
                      sidebarPanel("sidebar1"),
                      mainPanel("MainPanel1")
             ),
             tabPanel("tab2",
                      sidebarPanel("sidebar2"),
                      mainPanel("MainPanel2")
             )
  )
)

server <-function(input, output, session) {
  observeEvent(input$sidebar_button,{
    shinyjs::toggle(selector = ".tab-pane.active div:has(> [role='complementary'])")
  })
}

shinyApp(ui, server)

R shiny collapsible sidebar

2 Answers2