Unable to toggle hamburger icon on mobile view using Rails...
I'm experiencing an issue with the navbar button in Rails that was obtained from a template. The navbar button toggles correctly and registers a click event which is logged in the console.
The template works fine in a browser, but when implemented in Rails, it fails to work. I have added the code to the main app.js file to rule out any asset pipeline issues, considering the original js file from the template is lengthy (30k lines).
I've experimented with enabling and disabling turbolinks. A console log indicates that jQuery is reactive to the click event, yet the navbar remains unresponsive, suggesting the code is being accessed properly. Debugging the JavaScript in Chrome was inconclusive as the click event seemed to be bouncing around various parent and child elements during debugging.
//
//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require page
//= require script
//= require popper
//= require bootstrap
//= require activestorage
//= require_tree .
/**
* page is the main js file, loaded from vendor/assets
*/
$(document).on('ready turbolinks:load', function() {
page.initNavbar = function() {
/**
* Toggle navbar
*/
$(document).on('click', '.navbar-toggler', function() {
page.navbarToggle();
console.log("navbar clicked")
});
/**
* Tapping on the backdrop will close the navbar
*/
$(document).on('click', '.backdrop-navbar', function() {
page.navbarClose();
});
/**
* Toggle menu open on small screen devices
*/
$(document).on('click', '.navbar-open .nav-navbar > .nav-item > .nav-link', function() {
$(this).closest('.nav-item').siblings('.nav-item').find('> .nav:visible').slideUp(333, 'linear');
$(this).next('.nav').slideToggle(333, 'linear');
});
}
page.navbarToggle = function() {
var body = page.body,
navbar = page.navbar;
body.toggleClass('navbar-open');
if (body.hasClass('navbar-open')) {
navbar.prepend('<div class="backdrop backdrop-navbar"></div>');
}
}
page.navbarClose = function() {
page.body.removeClass('navbar-open');
$('.backdrop-navbar').remove();
}
});
The erb
<nav class="navbar navbar-expand-lg navbar-light navbar-stick-dark" data-navbar="smart">
<div class="container">
<div class="navbar-left mr-4">
<button class="navbar-toggler" type="button">☰</button>
<a class="navbar-brand" href="#">
<%= link_to root_url do %>
<% if controller_name == "home" %>
<%= image_tag 'uproar-light.png', class: 'navbar-brand'%>
<% else %>
<%= image_tag 'uproar-dark.png', class: 'navbar-brand'%>
<% end %>
<% end %>
</a>
</div>
<section class="navbar-mobile">
<nav class="nav nav-navbar mr-auto">
<a class="nav-link active" href="#home">Home</a>
<a class="nav-link" href="#section-features">Features</a>
<a class="nav-link" href="#section-pricing">Pricing</a>
<a class="nav-link" href="#">Resources</a>
<a class="nav-link" href="#">Contact</a>
</nav>
<div class="d-none d-stick-block">
<a class="btn btn-sm btn-light ml-lg-5 mr-2" href="#">Login</a>
<a class="btn btn-sm btn-success" href="#">Sign up</a>
</div>
</section>
</div>
</nav>