MaterializeCSS Sidenav JQuery Not Functioning

Question

I'm attempting to implement the responsive navigation bar Materialize CSS provides. I'm having trouble with implementing the JQuery side of the feature. I'm unsure as to why but the JQuery used to implement the feature is not functioning.

I've made my issue reproducible here.

The JQuery:

 $(document).ready(() => {
  $('.sidenav').sidenav();
 });

The HTML:

<div class="home_container">
<nav class="nav-wrapper">
    <div class="container">

        <a href="#" class="sidenav-toggle" data-target="testSidenav"><i class="material-icons">menu</i></a>
    </div>
    <ul class="left hide-on-med-and-down">
        <li>Registered Bikes</li>
        <li>Investigations</li>
        <li>Reports</li>
        <li>Vulnerability Map</li>
    </ul>
</nav>

<ul class="sidenav" id="testSidenav">
    <li>Registered Bikes</li>
    <li>Investigations</li>
    <li>Reports</li>
    <li>Vulnerability Map</li>
</ul>

<div name="content" class="row s12">
</div>

Cheers.

Answer 1

Two things are wrong with your code:

1. sidenav-toggle is not a valid classname. Correct classname is sidenav-trigger

2. All nav li's (including sidenav) must have a nested anchor tag to get the correct spacing:

<ul class="left hide-on-med-and-down">
  <li><a href="#!">Registered Bikes</a></li>
  <li><a href="#!">Investigations</a></li>
  <li><a href="#!">Reports</a></li>
  <li><a href="#!">Vulnerability Map</a></li>
</ul>

Fixed codepen here.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="home_container">
    <nav class="nav-wrapper">
        <div class="container">

            <a href="#" class="sidenav-trigger" data-target="testSidenav"><i class="material-icons">menu</i></a>
        </div>
        <ul class="left hide-on-med-and-down">
            <li><a href="#!">Registered Bikes</a></li>
            <li><a href="#!">Investigations</a></li>
            <li><a href="#!">Reports</a></li>
            <li><a href="#!">Vulnerability Map</a></li>
        </ul>
    </nav>

    <ul class="sidenav" id="testSidenav">
        <li><a href="#!">Registered Bikes</a></li>
        <li><a href="#!">Investigations</a></li>
        <li><a href="#!">Reports</a></li>
        <li><a href="#!">Vulnerability Map</a></li>
    </ul>

    <div name="content" class="row s12">
    </div>
</div>

Always use the markup from the documentation.