Usando el marco Angular para construir el front-end de mi sitio web, estoy tratando de incluir un botón/icono capaz de abrir y cerrar este sidenav:
<nav id="left-sidenav" class="sidenav"> <div class="local_nav"> <a class="link" href="#">About</a> <a class="link" href="#">Services</a> <a class="link" href="#">Clients</a> <a class="link" href="#">Contact</a> </div> </nav>Encontré un fantástico menú desplegable de hamburguesas en codepen.io, y terminé modelando el código HTML de esta manera.
<div id="menuToggle"> <input type="checkbox" onclick="toggleNav()" /> <span></span> <span></span> <span></span> <ul id="menu"></ul> </div>Siendo esta la función toggleNav() (agregada al encabezado index.html):
<script> //sidenav-width: 150px (this is defined in sidenav.component.scss) function toggleNav() { var x = document.getElementById("left-sidenav"); if (x.style.width === "0px") { //openNav x.style.width = "150px"; } else { //closeNav x.style.width = "0px"; } } </script>Entonces, cuando se carga la página, se ve así [no se preocupe por la imagen, es la primera vez que uso Angular y estoy tratando de mejorar :)]: Página recargada
Ahora, por alguna razón, al intentar usar este menú de hamburguesas, el primer clic no activa el evento onclick, y el ícono termina transformándose (como debería) en una cruz (ver el CSS de codepen.io). Página después del primer clic
Sin embargo, en el segundo clic, el evento parece comenzar a funcionar y finalmente aparece el sidenav, con la cruz volviendo al ícono de la hamburguesa. Si sigo haciendo clic en la hamburguesa, simplemente funciona como debería, con el ícono fuera de fase. Página después del segundo clic ; Página después del tercer clic
Esto no tiene sentido para mí, e inicialmente quería obtener la cruz cuando se muestra la navegación lateral, no cuando está oculta. ¿Alguien sabe cómo arreglar esto realmente?
Puede cambiar la implementación de la función toggleNav() para esto:
En su archivo .ts agregue esto.
toggle: boolean = false; toggleNav() { this.toggle = !this.toggle; window.scrollTo(0, 0); }He estado luchando con esto durante 6 días, pero finalmente resolví el problema simplemente cambiando el código JS de esta manera:
<script> //sidenav-width: 150px var open = false; function toggleNav() { let x = document.getElementById("left-sidenav"); if (open == false) { //openNav x.style.width = "150px"; } if (open == true) { //closeNav x.style.width = "0px"; } open = !open; } </script>No es la forma más correcta de manejar esto en Angular, pero funciona. Avíseme si lo encontró útil o si hay una forma más adecuada de resolver esto.