search

mkhairi / materialize-sass

Materializecss rubygem for Rails Asset Pipeline / Sprockets
http://materialize.labs.my/
MIT License
806 stars 243 forks source link

QUESTION: Using turbolinks causing sideNav issues with browsers back action #169

Closed avra911 closed 6 years ago

avra911 commented 6 years ago

When using turbolinks, if you navigate away from a page where you opened sideNav and then you use browser back button, the page displays only an overlay and no sideNav and you need to refresh the page.

Expected Behavior

It should display sideNav and you should be able to click on the overlay div which will close the sideNav and be able to navigate to the site. Or the sideNav should be closed and you are able to use the site.

This is most probably not exactly a materilize bug, but I am asking here for help, maybe we can find a solution.

Possible Solution

A possible solution would be to use turbolinks events and kill + reopen sideNav. I tried https://github.com/Dogfalo/materialize/issues/5396#issuecomment-346530882 but it gives me an error in the console:

Uncaught ReferenceError: M is not defined

PS:

Back button is causing sideNav side-effects on http://materialize.labs.my/ example as well. Open a few pages, then leave sideNav opened, then try to use the icon (left to the logo) and you will see that it will not work after you use back button from a browser in all next pages, until you refresh the page.

The browser used for the tests is Chrome for Mac v. 63.0.3239.132.

Thanks in advanced!

avra911 commented 6 years ago

Found a decent solution:

jQuery(document).on('turbolinks:load', function() {
    jQuery('.button-collapse').sideNav();
});

document.addEventListener("turbolinks:before-cache", function() {
    jQuery('.button-collapse').sideNav('destroy');
});