R shinydashboard must close childfull menuItem for sidebarItemExpanded to work

Question

I'm working on a Shiny dashboard and trying to get the right sidebar to show different content based on which childfull left sidebar menu item is expanded.

The problem is: after the first time you switch menuItems, the content in the right sidebar changes only when you click a second time on the currently-expanded menuItem to close it before clicking to expand a different menuItem.

If instead you just click from menuItem 1 to menuItem 2, the first menuItem will visually shrink when the other one expands, but apparently the value of input$sidebarItemExpanded doesn't change until you manually "deselect" the first menuItem. This is really not intuitive for the user, so I'm looking for a way to get around it.

Here is an example app:

library(shiny)

# convertMenuItem function, from https://stackoverflow.com/questions/31794702/r-shiny-dashboard-tabitems-not-apparing
convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = tabName
  mi
}


ui <- tags$body(class = "skin-blue sidebar-mini control-sidebar-open", tagList(dashboardPagePlus(
  header = dashboardHeaderPlus(
    title = "Animals",
    enable_rightsidebar = TRUE,
    rightSidebarIcon = "paw"
  ),
  
  body = dashboardBody(),
  
  rightsidebar = rightSidebar(
    uiOutput("rightSidebar") # We'll define this dynamically using renderUI in the server
  ),
  
  ## Left sidebar
  sidebar = dashboardSidebar(
    sidebarMenu(
      # Cats menu item
      convertMenuItem(menuItem(expandedName = "cats", text = "Cats", 
                               tabName = "cats", icon = icon("cat"),
                               startExpanded = TRUE,
                               class = "active",
                               h4("CAT CONTENT"),
                               selectInput("catSelector", label = "Select a cat",
                                           choices = c("American Shorthair", "Ragdoll", 
                                                       "Bengal", "Siamese", "Sphynx"))
      ), tabName = "cats"
      ),
      convertMenuItem(menuItem(expandedName = "dogs", text = "Dogs", 
                               tabName = "dogs", icon = icon("dog"),
                               class = "active",
                               h4("DOG CONTENT"),
                               selectInput("dogSelector", label = "Select a dog",
                                           choices = c("German Shepherd", "Poodle", 
                                                       "Chihuahua", "Husky", "Pitbull"))
      ), tabName = "dogs"
      )
    )
  )
),

)
)

server <- function(input, output, session){
  
  # RIGHT MENU BAR CONTROLS -------------------------------------------------
  observeEvent(input$sidebarItemExpanded, {
    if(input$sidebarItemExpanded == "cats"){
      message("Cats view has been selected")
      output$rightSidebar <- renderUI({
        rightSidebar(
          ### Right sidebar cat content
          rightSidebarTabContent(
            title = "Cat stuff",
            id = "catStuff",
            active = T,
            icon = "cat",
            p("Here is some information about cats.")
          )
        )
      })
    }else if(input$sidebarItemExpanded == "dogs"){
      message("Dogs view has been selected")
      output$rightSidebar <- renderUI({
        rightSidebar(
          ### Right sidebar dog content
          rightSidebarTabContent(
            title = "Dog stuff",
            id = "dogStuff",
            active = T,
            icon = "dog",
            p("Here is some information about dogs.")
          )
        )
      })
    }
  })
}

shinyApp(ui = ui, server = server)

If it's helpful, here is a screen recording where I demonstrate the problem. You can see that the app opens with the "cat" tab expanded, and there is cat-related content in the right sidebar. Then, if I click the "dog" tab, the content in the right sidebar updates appropriately. But then, if I try to go back to the "cat" tab, the right sidebar content doesn't update unless I click a second time on the "dog" tab to "close" it, even though it already looks closed to the user.

I've read several SO posts and info in the shinydashboard documentation about the behavior of childfull menuItems, how to use input$sidebarItemExpanded, etc., but I'm finding it all very confusing. My problem seems somewhat similar to what's documented here, except that in that example, the desired content for the childfull tab never shows up at all. In my case, the content will show up, but only if you manually "close" the other tab that is apparently expanded, though it doesn't look like it is. User ismirsehregal provided an answer to that problem involving hidden menu items, but I'm not sure how I would implement this to change the content in the right sidebar instead of in the dashboard body.

I would be grateful for any pointers on this--thank you very much!

R shinydashboard must close childfull menuItem for sidebarItemExpanded to work

0 Answers0