The Burger button don't work as intended when flash messages are active

Question

I'm learning Bulma and i've a simple app with devise authentication. This is my header partial:

<nav class="navbar is-light  is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand ">
            <%= link_to image_tag("bear.png", class: " logo navbar-start"), root_path %>
            <div class="navbar-item logo"> Vamos: Your Gaming Calendar </div>
            <div class="navbar-item notice"><%= notice %></div>
            <div class="navbar-item alert"><%= alert %></div>
            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-end">
                <% if user_signed_in?%>
                    <div class="navbar-item"> Ciao!, <%=current_user.email%></div>
                    <%= link_to "Vuoi fare logout?", destroy_user_session_path, data: { "turbo-method": :delete} , class: "navbar-item"%>
                    <%# <% link_to "Vuoi cancellarti?", cancel_user_registration, data: { "turbo-method": :delete} %><br> 
                <% else %>
                    <%= link_to "Want to sign_up?", new_user_registration_path, class: "navbar-item" %>
                    <%= link_to "Want to login?", new_user_session_path, class: "navbar-item" %>
                <% end %>
            </div> 
        </div>
    </nav>

and this is the vanilla js i've copied from bulma documentation for to activate the burger button:

document.addEventListener('DOMContentLoaded', () => {

    // Get all "navbar-burger" elements
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  
    // Add a click event on each of them
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
  
        // Get the target from the "data-target" attribute
        const target = el.dataset.target;
        const $target = document.getElementById(target);
  
        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
  
      });
    });
  
  });

Standard stuff, indeed.

Normally it runs except when there is some flash message active, or when there is some input to insert (as in login / sign-in phase). Also, if i click on my logo (and follow the root_path), burger button don't run. I have to reload to reactivate the .js. Seems weird.

why?

Answer 1

I think your problem is not in the code that adds the functionality to the button, but in how you are importing your javascript.

It would be good if you edited the post commenting on how you added that JS.

With developer tools, you can check whether a file is being uploaded or not. If it is being loaded but the menu does not work, in that case it may be an implementation issue, but for now I dare say that it is an import problem.

I don't know if you know how to work with JS in a Ruby on Rails application, but I leave you two guides that can help you.

Working with JS in Rails

Stimulus: A modest JavaScript framework for the HTML you already have.