Activar Menú de hamburguesa en el Navbar en Vue 3 - 52

▶

Ahora vamos a retomar lo que sería nuestro navbar que creamos anteriormente:

Redireccionar 404 en Vue Router - 51

Específicamente el menú de hamburguesa. Antes de comenzar, es importante recordar que aquí había un enlace, que es donde definimos el enlace botón de hamburguesa:

<button data-collapse-toggle="navbar-default" type="button"
  class="*** md:hidden ***"
  aria-controls="navbar-default" aria-expanded="false">
  <span class="sr-only">Open main menu</span>
</button>

El Problema en Modo Móvil

Entonces, retomando un poco el menú de hamburguesa, que sería este que tenemos aquí configurado... ¿cuál es el problema?

Aquí, en modo escritorio, todo funciona perfectamente. El menú se muestra sin problemas.

Pero cuando cambiamos a modo móvil, tenemos el menú de hamburguesa. Basado en lo que te explicaba antes, lo que sucede aquí es que ya no se cumple la regla md:block. Esa clase está en alguna parte — si hacemos un Control+F y buscamos md:block, veremos que es la que se encarga de mostrar el menú en escritorio. Al no cumplirse esa condición en móvil, el menú se oculta, y a partir de ahí se aplican otras reglas específicas para móviles.

Supón que quitamos esa clase: fíjate que el menú vuelve a aparecer y podemos navegar otra vez sin problema. Sin embargo, no quiero que el menú esté visible por defecto, sino que se muestre u oculte cuando presionemos el botón de hamburguesa.

Menú móvil

Ya tenemos identificado que el "problema" entre comillas está en esta clase hidden que tenemos acá. Así que, de forma programática, tenemos que ocultarlo o mostrarlo según el criterio del usuario. 

Implementación de la Lógica de Toggle

Vamos a manejar la lógica del toggle directamente en el componente. Coloco el bloque <script> y dentro, el data:

<button @click="showMenuMobile=!showMenuMobile" data-collapse-toggle="navbar-default" type="button" ***>***</button>
***
<div class="w-full md:block md:w-auto" :class="{ 'hidden' : showMenuMobile }" id="navbar-default">
***
<script>
export default {
  data() {
    return {
      showMenuMobile: false,
    }
  },
}
</script>

Aplicar Clases Condicionales

El siguiente paso es configurar las clases, es decir, quitar o mostrar el menú según el estado:

<button data-collapse-toggle="navbar-default" type="button"
  class="*** md:hidden ***"
  aria-controls="navbar-default" aria-expanded="false">
  <span class="sr-only">Open main menu</span>
</button>

Para esto, usamos :class. Es posible que no lo hayamos visto aún en el curso, pero es muy útil. Vue es lo suficientemente inteligente como para evaluar la condición y anexar o quitar la clase automáticamente:

<div class="w-full md:block md:w-auto" :class="{ 'hidden' : showMenuMobile }" id="navbar-default">

Detalles de Estilo

Se pueden aplicar transiciones, pero eso no es el foco ahora (esto es un curso básico). Lo que estamos haciendo es seleccionar el menú, que tiene muchas clases. Fíjate que aparece el hidden al principio, y cuando hacemos click ya no aparece, gracias a la lógica que aplicamos.

Esto funciona igual que usar un atributo condicional: si se cumple, se aplica; si no, no. Vue maneja internamente este atributo :class, porque en HTML solo puede haber un atributo class por elemento.

Vue lo que hace es mezclar las clases estáticas con las dinámicas basadas en la condición. Puedes añadir más condiciones si es necesario. Por ejemplo:

:class="{ 'hidden': !showMenuMobile, 'otra-clase': otraCondicion }"