Rails 5.2 - Sub-menus don't keep opened (Turbolink ?) - ruby-on-rails

Question

I have this sidebar and I am having troubles to open sub-menus.
When I click on a sidebar-dropdown it opens and closes immediately. The more I click the less it opens, and then it doesn't open anymore. Unless I reload...
I tried to disable Turbolink in this menu by adding data-turbolinks="false"in the html. It partially works but this implies other troubles.
The sidebar-dropdowns open and close as expected and for some reason I can't explain after some click in the the main navbar they become unclickable unless I reload the page...
A #appears at the end the url when clcik fails.. like so: http://localhost:3000//categories/66# (it happends if turbolink is enabled or disabled"
There are no error at all in the browser console.
In My app I also use gem 'webpacker', '~> 3.5.5'
Any idea of what could be wrong? What direction to take to fix this?
<div class="page-wrapper chiller-theme toggled"> <!--data-turbolinks="false" is added in the div when turbolink is disabled -->
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
Menu pro
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-menu">
<ul>
<li class="sidebar-dropdown">
<a href="#">
<i class="fas fa-cart-arrow-down"></i>
<span>Orders</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<%= link_to "Orders", orders_path, class: "list-item" %>
<%= link_to "New Orders", incoming_orders_path, class: "list-item" %>
</li>
</ul>
</div>
</li>
<li>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fas fa-truck"></i>
<span>Market</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<%= link_to "Markets", market_path, class: "list-item" %>
</li>
</ul>
</div>
</li>
<li>
</li>
<li class="sidebar-dropdown">
<a href="#" id="suppliers">
<i class="fas fa-address-book"></i>
<span>Suppliers</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<%= link_to "New Suppliers", new_supplier_path, class: "drop-item" %>
</li>
<li>
<%= link_to "Suppliers", suppliers_path, class: "drop-item" %>
</li>
</ul>
</div>
</li>
<li>
<li>
<%= link_to clients_customization_path, class: "list-item" do %>
<i class="fa fa-palette"></i> Customisation
<% end %>
</li>
</ul>
</div>
<!-- sidebar-menu -->
</div>
</nav>
</div>
and this is the js file:
// the below turbolink:load is commented when turbolink is disabled
$(document).on('turbolinks:load', function() {
// The below commented jQuery line is commented when turbolink is disabled and uncommented when trubolink is enabled
// jQuery(function ($) {
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if ($(this).parent().hasClass("active")) {
$(".sidebar-dropdown").removeClass("active");
$(this).parent().removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this).next(".sidebar-submenu").slideDown(200);
$(this).parent().addClass("active");
}
});
$("#close-sidebar").click(function() {
$(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
$(".page-wrapper").addClass("toggled");
});
// });
});
UPDATE > I figured out that in the case of turbolink is disabled that sidebar-dropdowns become unclickable after I visit a show page (any show pages make sidebar fails)In my show page I use turbolink for bootstrap carrousel.
So the deal is to find HOW I can make turbolink working correctly everywhere

Answer 1

I think you need to prevent the actual behaviour of the link that toggles the drowpdown.
$(".sidebar-dropdown > a").click(function(e) {
e.preventDefault();
....the rest
At least that will prevent the '#' on the url.