Why do I have the wrong animation for right sidenav in materialize.css?

Question

i wonder why I have a "left" animation for my right defined sidenav in materialize.css. look at that gif:

And here is my code:

    $(document).ready(function () {
        $('.sidenav').sidenav();
    });

//Here my right sidebar with a parameter "edge: right". Still wrong animation for it?
    $(document).ready(function () {
       $('#slide-out2').sidenav({
           edge: 'right',
           draggable: false
       });
    });

Thanks!

Answer 1

Possibly your issue is that the first function initializes ALL sidenavs with no modification (edge:'left' as default), and the second one re-initializes with the modification, so a potential conflict. In this case I would use two separate inits:

$(document).ready(function () {
    $('#left-nav').sidenav();
    $('#right-nav').sidenav({
       edge: 'right',
       draggable: false
   });
});

Codepen using vanilla JS.