title: Side nav is not working in materialize css
body: <p>Sidenav is not working. I have looked on this site but couldn't find the solution I was looking for.</p>
  
  <p>This is an ejs file</p>
  
  <pre><code>&lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Portfolio Blog&lt;/title&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Compiled and minified CSS --&gt;
     &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
  
     &lt;!-- Compiled and minified JavaScript --&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav&gt;
      &lt;div class="nav-wrapper"&gt;
        &lt;a href="#" class="brand-logo center"&gt;Tech Blog&lt;/a&gt;
        &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
          &lt;li&gt;&lt;a href="sass.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-activates="slide-out" class="button-collapse show-on-large right"&gt;
            &lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  &lt;!-- SIDENAV --&gt;
  &lt;ul id="slide-out" class="sidenav"&gt;
     &lt;li&gt;&lt;div class="user-view"&gt;
       &lt;div class="background"&gt;
         &lt;img src="images/office.jpg"&gt;
       &lt;/div&gt;
       &lt;a href="#user"&gt;&lt;img class="circle" src="images/yuna.jpg"&gt;&lt;/a&gt;
       &lt;a href="#email"&gt;&lt;span class="white-text email"&gt;jdandturk@gmail.com&lt;/span&gt;&lt;/a&gt;
     &lt;/div&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#!"&gt;&lt;i class="material-icons"&gt;cloud&lt;/i&gt;First Link With Icon&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
      &lt;/div&gt;
    &lt;/nav&gt;
      &lt;h1&gt;Index Page&lt;/h1&gt;
    &lt;/body&gt;
    &lt;script type="text/javascript"&gt;
      $('.button-collapse').sidenav();
    &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have tried by changing the jquery to a lower version. 
  If I used sideNav() instead then an error occurs:</p>
  
  <blockquote>
    <p>TypeError: $(...).sideNav is not a function</p>
  </blockquote>