Me encuentro con un proyecto con HTML
, CSS
y JavaScript
, estoy utilizando la librería de materialize
, y quiero ocultar el sidenav
en el momento en que llamo a una función o en la propia función de cerrar sesión del usuario. Mi código en JavaScript
es el siguiente:
mostrarNav:function(nickAlumno){
$('#logoSide').remove();
var cadena= '<li id="inicio_d"><a href="#" onclick="app.pantallaAlumno();">Inicio</a></li><li id="resultados_d"><a href="#">Resultados</a></li><li id="cerrar_d"><a href="#" onclick="app.cerrarSesion();">Cerrar Sesión</a></li>';
var cadena2= '<a href="#" id="logoSide" class="sidenav-trigger" data-target="mobile-nav"><i class="material-icons">menu</i></a>';
var cadena3='<li><div class="user-view"><div class="background"><img src="cliente-apache/img/pizarra-800x478.jpg"></div><a href="#user"><img src="cliente-apache/img/user.png" style="width:20%"></a><span class="white-text name">'+nickAlumno+'</span></div></li>';
cadena3= cadena3+'<li ><a href="#" onclick="app.pantallaAlumno();">Inicio</a></li><li ><a href="#">Resultados</a></li><li><div class="divider"></div></li><li ><a href="#" onclick="app.cerrarSesion();">Cerrar Sesión</a></li>';
$('#navBar').append(cadena);
$('#navSide').append(cadena2);
$('#mobile-nav').append(cadena3);
$(document).ready(function(){
$('.sidenav').sidenav();
});
},
cerrarSesion:function(){
if (window.localStorage.getItem('alu')!=undefined){
window.localStorage.removeItem("alu");
app.formLogin();
}
},
En esta parte estaría el sidenav
y la función donde me gustaría que se ocultara (cerrar Sesión). He probado a hacer un remove
, pero a la hora de volver a iniciar sesión me sobrescribe el contenido. El código en HTML
es este:
<nav class="blue" style="padding: 0px 10px;">
<div class="nav-wrapper" id="navSide">
<a href="#" class="brand-logo">EDUCA</a>
<ul class="right hide-on-med-and-down" id="navBar"></ul>
</div>
</nav>
<ul class="sidenav" id="mobile-nav"></ul>