multiple nested menus

[kpoliczer]

My challenge is to set multiple nested dropdowns as nested menu items on my page.

Now I found the NestedMenu package to create a "Nested Menu Widget". This works like described.

But if I want to have a second nested menu widget ist doesn't work. Then it seems that I get the same Widget twice.

library("NestedMenu")
library("shiny")


# Data
cities1 <- list(
  europe = list(
    name = "Europe1",
    items = list(
      france = list(
        name = "France",
        icon = "fa-cheese",
        items = list(
          paris = list(name = "Paris"),
          lyon = list(name = "Lyon")
        )
      ),
      italy = list(
        name = "Italy",
        icon = "fa-pizza-slice",
        items = list(
          roma = list(name = "Roma"),
          milano = list(name = "Milano")
        )
      )
    )
  ),
  america = list(
    name = "America1",
    items = list(
      namerica = list(
        name = "North America",
        items = list(
          usa = list(
            name = "USA",
            icon = "fa-flag-usa",
            items = list(
              chicago = list(name = "Chicago"),
              newyork = list(name = "New York")
            )
          ),
          canada = list(
            name = "Canada",
            icon = "fa-canadian-maple-leaf",
            items = list(
              ottawa = list(name = "Ottawa"),
              toronto = list(name = "Toronto")
            )
          )
        )
      ),
      samerica = list(
        name = "South America",
        items = list(
          brazil = list(
            name = "Brazil",
            icon = "fa-lemon",
            items = list(
              brasilia = list(name = "Brasilia"),
              saopolo = list(name = "Sao Polo")
            )
          ),
          peru = list(name = "Peru"),
          mexico = list(
            name = "Mexico",
            icon = "fa-hat-cowboy",
            items = list(
              mexicocity = list(name = "Mexico City"),
              tijuana = list(name = "Tijuana")
            )
          )
        )
      )
    )
  )
)


cities2 <- list(
  europe = list(
    name = "Europe2",
    items = list(
      france = list(
        name = "France",
        icon = "fa-cheese",
        items = list(
          paris = list(name = "Paris"),
          lyon = list(name = "Lyon")
        )
      ),
      italy = list(
        name = "Italy",
        icon = "fa-pizza-slice",
        items = list(
          roma = list(name = "Roma"),
          milano = list(name = "Milano")
        )
      )
    )
  ),
  america = list(
    name = "America2",
    items = list(
      namerica = list(
        name = "North America",
        items = list(
          usa = list(
            name = "USA",
            icon = "fa-flag-usa",
            items = list(
              chicago = list(name = "Chicago"),
              newyork = list(name = "New York")
            )
          ),
          canada = list(
            name = "Canada",
            icon = "fa-canadian-maple-leaf",
            items = list(
              ottawa = list(name = "Ottawa"),
              toronto = list(name = "Toronto")
            )
          )
        )
      ),
      samerica = list(
        name = "South America",
        items = list(
          brazil = list(
            name = "Brazil",
            icon = "fa-lemon",
            items = list(
              brasilia = list(name = "Brasilia"),
              saopolo = list(name = "Sao Polo")
            )
          ),
          mexico = list(
            name = "Mexico",
            icon = "fa-hat-cowboy",
            items = list(
              mexicocity = list(name = "Mexico City"),
              tijuana = list(name = "Tijuana")
            )
          )
        )
      )
    )
  )
)

ui<-
 fluidPage(
  theme = bs_theme (
   version = 4,
  ),
  class = "format-md",  # format-full, format-lg, format-md, format-sm

  tags$section(
   fluidRow(
    tabsetPanel(
     id = "mainnav",
     tabPanel(
       icon = icon("pencil-alt"),
       value = "nested1",
       class="mainlevel",
       id="city1",
       NestedMenuOutput("nestedMenuElement1", height = "auto"),
       mainPanel(
         width = 12,
         class = "main-content",
         fluidRow (
           class="content-section",
           titlePanel("Start einer Seite 1"),
           verbatimTextOutput("clickedNestedNav1"),
         )
       )
     ),
     tabPanel(
       icon = icon("pencil-alt"),
       value = "nested2",
       class="mainlevel",
       id="city2",
       NestedMenuOutput("nestedMenuElement2", height = "auto"),
       mainPanel(
         width = 12,
         class = "main-content",
         fluidRow(
           tags$h1('Start einer Seite 2'),
           verbatimTextOutput("clickedNestedNav2"),
         )
       )
     )
    )
   )
  ),
 )

server<-function(input,output,session){
 output$nestedMenuElement1 <- renderNestedMenu({
    NestedMenu(
      "Cities1", items = cities1, trigger = "hover"
    )
 })

 output$clickedNestedNav1 <- renderPrint({
    input$nestedMenuElement1
 })

 output$nestedMenuElement2 <- renderNestedMenu({
    NestedMenu(
      "Cities2", items = cities2, trigger = "hover"
    )
 })

 output$clickedNestedNav2 <- renderPrint({
    input$nestedMenuElement2
 })
}
shinyApp(ui, server)

The problem to trigger the tab I could solve.
My problem is, that I get to Widgets with label "Cities2" instead of one each and as dropdowns I get the cities1 list by hover both widgets.

Some ideas or hints, please!

[saturne]

Hi,

I am the author of this package. I don't understand your question. The two lists you use are the same, no?

[kpoliczer]

Oh - then first - thank you very much for this package. I love it and it is exaktly I was looking for.
I am a frontend developer (html, css, javascript, bootstrap and so on. This is my world). To learn R deeply I haven't had much time yet.

And sry, for my too simple example. Just to try it I took your example list simply, doubled it and wrote Europe1/Europe2 and Amerika1/Amerika2 as a difference. I didn't want to go to the trouble of typing my own list just yet. For example, the second could be a list of vehicles. I was too lazy for that.

My Problem ist that I use the NestedMenu object with two different labels, and this two "different" lists.
The two generated buttons both have the same label and both open the same list. Both lables are Cities2 instead Cities1 and Cities2 - and both opens the list with Europe1 and America1 after the first hover.

I would be very happy if I had a solution for this.

[saturne]

Ah I didn't see the difference, indeed. I will give a try. This looks like a bug...

[saturne]

Ok, I fixed the bug You can install the dev version:

remotes::install_github("stla/NestedMenu")

Many thanks for the report!

[kpoliczer]

You're welcome! I've to say thank you! Now it works perfektly for me.