MaterializeCSS - SideNav events not triggering properly

I have a basic html-page with a navbar (Navbar Documentation) and a collapsible sidenav (SideNav Documentation). The sidenav itself works fine but the "onOpenStart" and "onEndClose" events both trigger as soon as the page is done loading and not when the sidenav opens/closes.

I guess an alternative would be to hook some events on the sidenav-trigger and go from there but that seems quite unneccessary if these events already exist.

JsFiddle: https://jsfiddle.net/gvgo2Lu2/2/
Any help would be appreciated

HTML

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <nav>
    <div class="nav-wrapper">
      <div class="row">
        <div class="col s12">
          <a href="#!" class="brand-logo">Logo</a>
          <a href="#" data-target="mobile-nav" class="sidenav-trigger">
            <i id="test" class="material-icons">menu</i>
          </a>
          <ul class="right hide-on-med-and-down">
            <li>
              <a href="#!">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <!-- MOBILE NAV -->
  <ul class="sidenav" id="mobile-nav">
    <li>
      <a href="#!">Link</a>
    </li>
  </ul>
</body>

var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
  onOpenStart: console.log("I trigger as soon as the page is loaded"),
  onCloseEnd: console.log("same")
});

Solution

According to the documentation the onOpenStart and onCloseEnd events need a callback function. But, you are using the result of a computation: console.log(....). Because that value is undefined you are not adding the event handlers!

In order to overcome the issue you need to change your init to (updated fiddle):

var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
    onOpenStart: function () {
        console.log("I trigger as soon as the page is loaded");
    },
    onCloseEnd: function () {
        console.log("same");
    }
});

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


<nav>
    <div class="nav-wrapper">
        <div class="row">
            <div class="col s12">
                <a href="#!" class="brand-logo">Logo</a>
                <a href="#!" data-target="mobile-nav" class="sidenav-trigger">
                    <i class="material-icons">menu</i>
                </a>
                <ul class="right hide-on-med-and-down">
                    <li>
                        <a href="#!">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
    <li>
        <a href="#!">Link</a>
    </li>
</ul>