Bootstrap 3 Sidebar Navgivator on mobile view jquery

Question

I am using RoR and one thing baffles me, maybe I'm missing something, as I have built new navbar, and this sidebar display on mobile only, not in desktop and it's working fine prefect. Turbolink is ready to function.

  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

however when I click on another page through and the sidebar is no longer working, it shows only collapsed dropdown, so I have to refresh the browser again to get sidebar back.

Here is code for sidebarNav.js as this code is on the application.js require

window.onload = function () {
    window.jQuery ? $(document).ready(function () {
        $(".sidebarNavigation .navbar-collapse").hide().clone().appendTo("body").removeAttr("class").addClass("sideMenu").show(), $("body").append("<div class='overlay'></div>"), $(".navbar-toggle").on("click", function () {
            $(".sideMenu").addClass($(".sidebarNavigation").attr("data-sidebarClass")), $(".sideMenu, .overlay").toggleClass("open"), $(".overlay").on("click", function () {
                $(this).removeClass("open"), $(".sideMenu").removeClass("open")
            })
        }), $(window).resize(function () {
            $(".navbar-toggle").is(":hidden") ? $(".sideMenu, .overlay").hide() : $(".sideMenu, .overlay").show()
        })
    }) : console.log("sidebarNavigation is working")
};

Nav code in html.erb

<!-- Static navbar -->
<nav class="navbar navbar-inverse navbar-default navbar-static-top navbar-margin-bottom sidebarNavigation"
    data-sidebarClass="navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle left-navbar-toggle" data-toggle="collapse"
                data-target="#myNavbar" aria-expanded="false" aria-controls="myNavbar">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <%= link_to root_path do %>
            <span>
                <%=  image_tag("youhire-logo-2.png", :alt => "youhire logo", :class =>"youhire-logo pull-left") %>
            </span>
            <% end %>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <% if (!user_signed_in?)%>
                    <li><%= link_to t('help'), root_path %></li>
                    <% else %>
                    <li><% if current_user.role %> <%= link_to "List your equipment", new_tool_path %> <% end %></li>
                    <li><%= link_to t('help'), root_path %></li>
                    <% end %>

                    <% if (!user_signed_in?)%>
                    <li><%= link_to t('signup'), choice_path %></li>
                    <li><%= link_to t('login'), new_user_session_path %></li>
                    <% else %>
                    <li>
                        <%= link_to notifications_path do %>
                        <i class="fa fa-bell fa-2x"></i>
                        <span class="badge"
                            id="navbar_num_of_unread"><%= current_user.unread if current_user.unread > 0 %></span>
                        <% end %>
                    </li>

                    <li class="dropdown">
                        <% if current_user.role %>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            <%= current_user.company %>
                            <span class="caret"></span></a>
                        <% else %>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            <%= current_user.fullname %> <%= current_user.surname %>
                            <span class="caret"></span></a>
                        <% end %>
                        <ul class="dropdown-menu">
                            <li><%= link_to t('dashboard'), dashboard_path %></li>
                            <li><%= link_to t('toolrent'), your_tools_path %></li>
                            <li><%= link_to t('editprofile'), edit_user_registration_path %></li>
                            <li role="separator" class="divider"></li>
                            <li><% if current_user.role %><%= link_to t('addlisting'), new_tool_path %> <% end %>
                            </li>
                            <li><% if current_user.role %><%= link_to t('viewlisting'), tools_path %> <% end %></li>
                            <li><%= link_to "Orders received", reservations_tools_path %></li>
                            <li role="separator" class="divider"></li>
                            <li><%= link_to  t('logout'), destroy_user_session_path, method: :delete %></li>
                        </ul>
                    </li>
                    <% end %>
                </ul>
        </div>
    </div>
</nav>

I must be missing something

Answer 1

Take the $(document).ready out of the window.onload event...

I suspect you are using AJAX for your page loads, because window.onload is only executed once when the website loads, and further AJAX requests do not trigger the window.onload event.