NavbarBurger hamburger icon not toggling the navbar menu

[luisDVA]

Hi all,

I'm building an app and when I shrink down the window and the hamburger icon appears, nothing happens when I click it and the menu items don't show up.

This happens in the RStudio viewer and when I open the app in the browser. I've seen the hamburger work in the echarts4r shiny demo by @JohnCoene and when I try the same approach the button doesn't open up a menu.

Here's some example code that reproduces my problem:

library(shiny)
library(shinybulma)

shinyApp(
  ui = bulmaPage(
    bulmaNavbar(
      color = "primary",
      bulmaNavbarBrand(
        bulmaNavbarItem(
          "home",
          href = "Item 1"
        ),
        bulmaNavbarBurger()
      ),
      bulmaNavbarMenu(
        bulmaNavbarItem(
          "Item 1"
        ),
        bulmaNavbarItem(
          "Item 2"
        ),
      )
    ),
    bulmaNav(
      "Item 1",
      bulmaContainer(
        bulmaTitle("Item 1")
      )
    ),
    bulmaNav(
      "Item 2",
      bulmaContainer(
        bulmaTitle("Item 2")
      )
    )
  ),
  server = function(input, output) {
  }
)

Am I missing something? Thanks for all the work

[thesixmax]

Late answer, but I was wondering the same and found the culprit. The bulmaNavbarBurger function is defined as:

bulmaNavbarBurger <- function(color = "primary"){
  shiny::tags$button(
    class = paste0("button navbar-burger is-", color),
    `data-target` = "navMenu",
    shiny::tags$span(),
    shiny::tags$span(),
    shiny::tags$span()
  )
}

You have to point data-target to navbar-menu instead of navMenu and it behaves as intended. Hopefully this will be fixed in an upcoming version.

[luisDVA]

thanks @thesixmax ! Looking forward to building new apps with shinybulma now!

[thesixmax]

thanks @thesixmax ! Looking forward to building new apps with shinybulma now!

I revisited this, and found that my original solution is wrong. Changing data-target = "navMenu" is incorrect. If anything else than "navMenu" is selected as target, the burger will show, but it meeses with is-active class of navbar-burger. Instead we should add a parameter for on-click (found the solution here):

bulmaNavbarBurger <- function(color = "primary") {
  shiny::tags$button(
    class = paste0("button navbar-burger is-", color),
    `data-target` = "navMenu",
    onclick = "document.querySelector('.navbar-menu').classList.toggle('is-active');",
    shiny::tags$span(),
    shiny::tags$span(),
    shiny::tags$span()
  )
}

This works as intended, so both navbar-menu and navbar-burger gets the is-active class on click.