素材デザインベースのモバイルアプリでサイドナビが動作しません

Question

サイドナビ機能付きのシンプルなページを書いています。しかし、サイドナビゲーションは、左上隅をクリックすると開くことができません。私のコード：
Html:

<nav> 
      <ul class="right hide-on-med-and-down"> 
       <li><a href="#!">First Sidebar Link</a></li> 
       <li><a href="#!">Second Sidebar Link</a></li> 
      </ul> 
      <ul id="slide-out" class="side-nav"> 
       <li><a href="#!">First Sidebar Link</a></li> 
       <li><a href="#!">Second Sidebar Link</a></li> 
      </ul> 
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
     </nav> 


     <div class="row"> 
      <div class="card logincard"> 
       <form class="col s12"> 
        <h5>Enter your mail id to reset your password: </h5> 
        <div class="row"> 
        <div class="input-field col s12"> 
         <input id="mail" type="email" class="validate"> 
         <label for="mail">Mail</label> 
        </div> 
        </div> 
        <div class="row"> 
        <a class="waves-effect waves-light btn" style="background: #4099FF;">Submit</a> 
        </div> 
       </form> 
      </div> 
     </div> 

JS:

(function($){ 
      $(function(){ 

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

      }); // end of document ready 
     })(jQuery); // end of jQuery name space 

JSFiddleリンクは次のとおりです。https://jsfiddle.net/0hq4g3f1/
私はそれを解決することができますか？

クラス left内部のあなたのアイコン（か何か）を配置する必要が

Answer 1

UL

<nav> 
    <ul class="left show-on-med-and-down"> 
    <li><a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a></li> 
    </ul> 
    <!-- etc -->