无法在另一个sidenav中调用sidenav（一个html中有2个Sidenav，Materialize）

Question

我正在尝试将另一个sidenav调用到我的主要sidenav（同一html中的2个sidenavs）中。这是我的代码。

<ul id="sidenav-1" class="sidenav">
      <li><a class="waves-effect" data-target="sidenav-2" class="right sidenav-trigger show-on-medium-and-up">Editar perfil<i class="material-icons">edit</i></a></li>


ul id="sidenav-2" class="sidenav">
          <a href="#user"><img class="circle" src=".jpg"></a>
          <a href="#name"><span class="white-text name">John Doe</span></a>
          <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
        </div></li>
        <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
        <li><a href="#!">Second Link</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">Subheader</a></li>
        <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
      </ul>
      
    <div class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light ligh-blue sidenav-trigger tooltipped fixed" data-target="sidenav-1" class="left sidenav-trigger hide-on-medium-and-up" data-tooltip="Informacion"><i class="material-icons">adjust</i></a></div>

    <script>
      $(document).ready(function(){
      $('.tooltipped').tooltip();
      $('.collapsible').collapsible();
      $('.sidenav').sidenav();
	    $('#sidenav-1').sidenav({ edge: 'right' });
	    $('#sidenav-2').sidenav({ edge: 'left' });
      });
    </script>

我正在使用Materialize框架。