how add a sidebar to navbar with materialize?
<p>This is what I want: when I click the username (in <strong>header</strong>), show the <strong>sidebar</strong>. This only works out of the <strong>nav</strong> label and I must use <strong>a</strong> label. In a button not works.</p>

<h2>HTML code</h2>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link href="css/icon.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
    &lt;link rel="stylesheet" href="css/materialize.min.css"&gt;
    &lt;title&gt;Dashboard&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;ul id="side-setting" class="side-nav"&gt;
        &lt;li&gt;&lt;a href="#"&gt;ver perfil&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;editar perfil&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/logout/"&gt;cerrar sesion&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;nav class="teal" role="navigation"&gt;
        &lt;div class="nav-wrapper container-fluid"&gt;
            &lt;ul class="hide-on-med-and-down"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Grupos&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="right hide-on-med-and-down"&gt;
                &lt;li&gt;
                    &lt;a href="#" data-activates="side-setting" class="navbar-collapse"&gt;username&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;

    &lt;a href="#" data-activates="side-setting" class="button-collapse"&gt;here&lt;/a&gt;
    &lt;button class="btn" data-activates="side-setting" class="button-coll"&gt;sidenav&lt;/button&gt;

    &lt;script src="js/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/materialize.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/init.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h2>init.js code</h2>

<pre><code>(function($){
    $(function(){
        $('select').material_select();
        $('.button-collapse').sideNav();
        $('.parallax').parallax();

    }); // end of document ready
})(jQuery); // end of jQuery name space
</code></pre>

<p>how I add this sidebar? I want this float to the right when I click in a button or username that is positioned in header (nav)</p>