Problems when applying materialization when creating web pages in rubyonrails

<title>Sns</title>
<%= csrf_meta_tags %>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<nav>
  <div class="nav-wrapper">
    <a href="/" class="brand-logo">SNS</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="/posts">Posts</a></li>
      <li><a href="#">Sign In</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="/posts">Posts</a></li>
      <li><a href="#">Sign In</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </div>
</nav>

$(".button-collapse").sideNav();