Menu
I have a simple page that has a header and drawer navigation, as below
My problem is, whenever I navigate to another page, the drawer menu icon (hamburger icon) disappears. I was able to trigger the icon to show up using componentHandler.upgradeDom(); at Chrome's console.
I tried to remove //= require turbolinks and everything continues to work, of course at the cost of my pages loading speed.
FYI, I moved javascripts to the bottom of <body> to improve first page loading speed. I also tried to move the javascripts back to <head> tag, with and without data-turbolinks-track, the problem still recur.
I do hope MDL and Turbolinks can work together without costing me (first page) loading speed.
Any help much appreciated.
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><%= yield(:title) %></span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<!-- some links -->
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"><%= yield(:title) %></span>
<nav class="mdl-navigation">
<!-- some links -->
</nav>
</div>
<main class="mdl-layout__content">
<%= yield %>
</main>
</div>
<%= javascript_include_tag 'https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js', 'data-turbolinks-eval' => 'false' %>
<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>
</body>
Update: the only way I able to make both work together is to add componentHandler.upgradeDom(); at the very end of <body>
599
Another solution is using the TurboLinks' page:change event to call upgradeDom.
document.addEventListener('page:change', function() {
componentHandler.upgradeDom();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
