CODEWITHSUNDEEP
shinyshinydashboard
Gaurav Bansal
Gaurav Bansal

Reputation: 5660

shinydashboard sidebar unable to uncollapse multiple tabs

I have some very simple shinydashboard code: 

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(id='tab1',
      menuItem('tab 1', tabName='tab1',
        menuSubItem('subtab 1', tabName='tab1subtab1'),
        menuSubItem('subtab 2', tabName='tab1subtab2')
      ),
      menuItem('tab 2', tabName='tab2',
        menuSubItem('subtab 1', tabName='tab2subtab1'),
        menuSubItem('subtab 2', tabName='tab2subtab2')
      )
    ),
    tags$head(tags$script(HTML('$(document).ready(function() {$(".treeview-menu").css("display", "block");})')))
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName='tab1subtab1',
        verbatimTextOutput('check11')
      ),
      tabItem(tabName='tab1subtab2',
        verbatimTextOutput('check12')
      ),
      tabItem(tabName='tab2subtab1',
        verbatimTextOutput('check21')
      ),
      tabItem(tabName='tab1subtab1',
        verbatimTextOutput('check22')
      )
    )
  )
)

server <- function(input, output, session) {
  observe(print(input$tab))

  output$check11 <- renderPrint(input$tab)
  output$check12 <- renderPrint(input$tab)
  output$check21 <- renderPrint(input$tab)
  output$check22 <- renderPrint(input$tab)
}

shinyApp(ui, server)

In the code above, there is some HTML to ensure that the tab options are uncollapsed when the app launches. However, if the user collapses one of the tabs, and then uncollapses it, the other tab automatically collapses. This means the sidebar cannot return to its original state of both tabs being uncollapsed. How can this be fixed?

UPDATE: I have modified the code a bit from my original post. This new version has the observe(print(input$tab)) bit to modify output based on which tab has been selected. The answer provided by GyD below answers my original question, but it doesn't let me keep the observe(print(input$tab)) functionality that I need.

Upvotes: 2

Views: 348

Answers (1)

GyD
GyD

Reputation: 4072

This behavior was not caused by your js code, it is just how sidebarMenu is. If a tab is selected, the other is collapsed automatically.

While I don't know how to set this via js or something, the easiest solution I came up with is to use 2 sidebarMenu-s instead of 1.

Again, this might not be what you're looking for, but it should solve the problem of collapsing.

Code:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(id='tab',
                menuItem('tab 1', tabName='tab1',
                         menuSubItem('subtab 1', tabName='tab1subtab1'),
                         menuSubItem('subtab 2', tabName='tab1subtab2')
                )
    ),
    sidebarMenu(id='tab2',
                menuItem('tab 2', tabName='tab2',
                         menuSubItem('subtab 1', tabName='tab2subtab1'),
                         menuSubItem('subtab 2', tabName='tab2subtab2')
                )
    ),
    tags$head(tags$script(HTML('$(document).ready(function() {$(".treeview-menu").css("display", "block");})')))
  ),
  dashboardBody()
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

Upvotes: 2

Related Questions