Introducing navtreePanel()

[cpsievert]

This PR introduces navtreePanel() -- a modern drop-in replacement for navlistPanel() which offers two main benefits:

1. Handles arbitrarily nested navbarMenu()s via collapsing submenus (you're only allowed one in navlistPanel(), tabsetPanel(), etc)
2. Navigation labels remain displayed after selection.

For a basic example:

shinyApp(
  fluidPage(
    theme = bslib::bs_theme(),
    navtreePanel(
      tabPanel("A", "a"),
      tabPanel("B", "b"),
      navbarMenu(
        "More letters",
        tabPanel("C", "c"),
        tabPanel("D", "d"),
        navbarMenu(
          "More letters",
          tabPanel("E", "e"),
          tabPanel("F", "f")
        )
      )
    )
  ),
  server = function(input, output) {}
)

navtreePanel() works with all the tab updating functions, here's a small demo:

library(shiny)

ui <- fluidPage(
  theme = bslib::bs_theme(),
  p("Press add, then select, then remove"),
  actionButton("add", "Add 'Dynamic' menu"),
  actionButton("select", "Select 'Dynamic' menu"),
  actionButton("remove", "Remove 'Dynamic' menu"),
  br(), br(),
  navtreePanel(
    id = "treelist",
    tabPanel("A", "a"),
    tabPanel("B", "b"),
    navbarMenu(
      "More letters",
      tabPanel("C", "c"),
      tabPanel("D", "d"),
      navbarMenu(
        "More letters",
        tabPanel("E", "e"),
        tabPanel("F", "f")
      )
    )
  )
)

server <- function(input, output) {
  observe(print(input$treelist))
  
  observeEvent(input$add, {
    appendTab(
      inputId = "treelist",
      navbarMenu(
        "Dynamic Menu",
        tabPanel("Dynamic", "Dynamic tab")
      )
    )
  })
  observeEvent(input$select, {
    updateTabsetPanel(inputId = "treelist", selected = "Dynamic")
  })
  observeEvent(input$remove, {
    removeTab(inputId = "treelist", target = "Dynamic Menu")
  })
}

shinyApp(ui, server)

Testing notes

Install remotes::install_github("rstudio/shiny") and run the app above. You should see a collapsed menu appear after clicking "Add"

First, click the "Add" button and a collapsed menu should appear. Then, click "select" and that collapsed menu should expand and the item named "Dynamic" tab should be highlighted. Then, click "Remove" and the menu should disappear.

TODO

• Make it easy to put content in the nav
• Can we think of this more generally as being integrated with a collapsible sidebar?

[cpsievert]

Note to self: all data-target uses should also have a data-bs-target for BS5 support