Why is my Materialize sidenav hamburger menu not working?

I'm using a sidebar with a navbar at the top that just displays the hamburger button (when mobile), and a refresh button. It does this fine, but when you click the hamburger icon nothing happens! The sidebar doesn't open. How can I fix this?

Here's my code (the stuff the matters):

<div class="navbar-fixed">
    <nav class="navbar blue">
        <div class="nav-wrapper">
            <ul class="right hide-on-med-and-down">
                <li><a onClick="window.location.reload()"><i class="material-
    icons">refresh</i></a></li>
            </ul>

            <a href="#" data-target="slide-out" class="sidenav-trigger"><i 
    class="material-icons">menu</i></a>
        </div>
    </nav>
</div>

<ul id="slide-out" class="sidenav sidenav-fixed">
    ...
</ul>

And yes, I do have the Materialize CSS and JS, with jQuery version 2.1.1.

Solution

Please see this fiddle for a working solution and how to import the needed js.

Code:

<head>
    <title></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    <script>
      <!-- this part is important! -->
      $(document).ready(function () {
        $(".button-collapse").sideNav();
      });
    </script>
</head>
<body>
   <div class="navbar-fixed">
      <nav>
          <div class="nav-wrapper">
             <a href="#!" class="brand-logo">Logo</a>
             <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
             <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
         </div>
      </nav>
   </div>
   <ul class="side-nav" id="mobile-demo">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
  </ul>
</body>

Remember to initialize the sideNav in your document.ready() function!

This should do the trick.