SideNav

EL Sidenav es un menu que aparece en la parte izquierda de la pantalla al pulsar un boton
Para crear el boton ponemos un ancla con la clase sidenav-trigger y un data-target con el id del menu
Dentro del ancla ocupamos un icono con la clase material-icons

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

Para crear el menu, ocupamos una lista ul con la clase sidenav y un id con el mismo nombre que el data-targer que pusimos en el ancla
Dentro de la ul colocamos los elementos que queremos mostrar en el menu.
Tambien hay que inicializar los scripts. El especifico para este script o el automatico

<ul class="sidenav" id="menu-side">
    <li>
        <div class="user-view ">
            <div class="background">
                <img src="images/cabecera.jpg" alt="" class="responsive-img">
            </div>
            <a href="#">
                <img src="images/LogoGaesga.jpg" alt="" class="circle ">
            </a>
            <a href="#">
                <span class="name white-text">Gaesgasoft</span>
            </a>
            <a href="#">
                <span class="email white-text">gaesgasoft@gmail.com</span>
            </a>
        </div>
    </li>
    <li>
        <a href="#"><i class="material-icons">cloud</i>Primer Elemento</a>
    </li>
    <li>
        <a href="#"><i class="material-icons">cloud</i>Segundo Elemento</a>
    </li>
    <li>
        <a href="#"><i class="material-icons">cloud</i>Tercer Elemento</a>
    </li>
    <li>
        <div class="divider"></div>
    </li>
    <li><a class="sidenav-close" href="#!">Pulsa para cerrar el Sidenav</a></li>
</ul>

Inicializacion

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});

Opciones

Name	Type	Default	Description
edge	String	'left'	Side of screen on which Sidenav appears.
draggable	Boolean	true	Allow swipe gestures to open/close Sidenav.
inDuration	Number	250	Length in ms of enter transition.
outDuration	Number	200	Length in ms of exit transition.
onOpenStart	Function	null	Function called when sidenav starts entering.
onOpenEnd	Function	null	Function called when sidenav finishes entering.
onCloseStart	Function	null	Function called when sidenav starts exiting.
onCloseEnd	Function	null	Function called when sidenav finishes exiting.
preventScrolling	Boolean	true	Prevent page from scrolling while sidenav is open.

Dropdown en el menu

First Sidebar Link
Second Sidebar Link
- Dropdown
  - First
  - Second
  - Third
  - Fourth

<ul id="slide-out" class="sidenav">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
            <li>
                <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#!">First</a></li>
                        <li><a href="#!">Second</a></li>
                        <li><a href="#!">Third</a></li>
                        <li><a href="#!">Fourth</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>
                        
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

Fixed

Para que el menu este fijo en la parte izquierda hay que ocupar la clase sidenav-fixed

<ul id="slide-out" class="sidenav sidenav-fixed">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
</ul>