SideNav链接未出现在导航栏中

Question

我想创建一个管理菜单。在我的导航栏中，我想添加一个图标，当您按下该图标时，将显示sidenav。但是事实是，当我复制时，从the Materialize doc粘贴代码，插入

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

当我将此行放在nav内时，菜单图标和文本没有出现，我也不知道为什么... 在Nav标签之外：

sidenav可能会出现：

但是我将链接放在导航栏中：

这是我的代码：

HTML：

<nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">Logo</a>

            <ul id="nav-mobile" class="right hide-on-med-and-down">

                <li><a href="#" data-target="slide-out" class="sidenav-trigger">menu</a></li>
            </ul>
        </div>
    </nav>

    <ul id="slide-out" class="sidenav">
        <li><div class="user-view">
                <div class="background">
                    <img src="#">
                </div>
                <a href="#user"><img class="circle" src="#"></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>

在我的app.js中：

    M.AutoInit();
$(document).ready(function(){
    $('.modal').modal();
    $('.sidenav').sidenav({
            menuWidth: 300, // Default is 240
            edge: 'left', // Choose the horizontal origin
            closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
        }
    );
});

我的想法不多了，我不明白为什么它没有出现。.