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.

Answer 1

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)

Answer 2

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)