Materialize CSS side-nav no funciona

Tengo una configuración básica de Materialise en ejecución y todo parece estar bien, excepto por la navegación lateral deslizable.

Aquí está mi código. Menú:

<ul class="right hide-on-med-and-down">
    <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
    <li><a class="modal-trigger" href="#signup">Signup</a></li>
    <li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>

<ul id="slide-out" class="side-nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Signup</a></li>
    <li><a href="#">Sign In</a></li>
</ul>

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

JS:

<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
    $('.modal-trigger').leanModal();
});
</script>

Obtengo el menú de hamburguesas apropiado al reducir el tamaño de la pantalla, sin embargo, al hacer clic en la hamburguesa no se expande un menú. La URL se actualiza con un hash # y listo. No hay errores reportados en mi salida JS.

Con las otras funciones JS, el menú desplegable funciona y el modal funciona. Perplejo por qué el Sr. sideNav no está cooperando.

¿Algunas ideas?

Respuestas a la pregunta(1)

Su respuesta a la pregunta