[PRO] and standard - Navbar works only with a full page refresh

[fabOnReact]

Hello,

I have an app with Ruby on Rails Turbolinks 5 so I am also trying to fix this out and we can help each other.

If you check your pro version navbar, it will not work well if you try to click more then once the navbar links, this is because that version is maybe done with angular and is not doing a full page refresh..

http://demos.creative-tim.com/light-bootstrap-dashboard-pro/examples/charts.html#

While the standard one works allways, because you allways trigger with those links a full page refresh.

http://demos.creative-tim.com/light-bootstrap-dashboard/icons

Turbolinks 5, similar to angular and other JS Frameworks, will not trigger a full page refresh after that I click the links.

The solution is in the following code, from light-bootstrap-dashboard.js row 107-119

lbd.misc.navbar_menu_visible will be 1 when visible and the removeClass('nav-open'); will hide the navbar, while addClass('nav-open') will show it. I will try to trigger this on page refresh somehow.

Thanks a lot for the amazing Layout Trying to help you Best Regards Fabrizio Bertoglio

$toggle.click(function (){    
                if(lbd.misc.navbar_menu_visible == 1) {
                    $('html').removeClass('nav-open'); 
                    lbd.misc.navbar_menu_visible = 0;
                    $('#bodyClick').remove();
                     setTimeout(function(){
                        $toggle.removeClass('toggled');
                     }, 400);

                } else {
                    setTimeout(function(){
                        $toggle.addClass('toggled');
                    }, 430);                    

[fabOnReact]

I solved like this the issue with the following code. I am using Rails 5 with Turbolinks 5. I included this code in my js file script.js

var ready = function() {
    if ($(window).width() <= 991) { 
        $('.navbarLinks').click(function(){
            $('html').removeClass('nav-open');
            lbd.misc.navbar_menu_visible = 0;
            $('#bodyClick').remove();
             setTimeout(function(){
                $toggle.removeClass('toggled');
             }, 400);
        });

    }    
}

/*$(document).ready(ready);*/
$(document).on('turbolinks:load', ready);

[alexandru-paduraru]

@fabriziobertoglio1987 thank you for pointing out and also including the solution. Yes, you're right, Rails and turbolinks are not doing a full page reload and the document.ready is not triggered on each page change. Another option would be to place the .navbarLinks in a function that is inside a "document on click" triggered. That makes sure it will work no matter how many times you add/remove the .navbarLinks button. More details here: http://stackoverflow.com/questions/14879168/document-onclick-id-function-vs-id-onclick-function

But your solution is better because you have more elements that are triggered after they are loaded, we used the same technique for creative-tim.com too.

Best, Alex