Creando la cabecera de VueTalk

• En esta lección crearemos la barra de navegación de nuestro proyecto VueTalk. Es una pieza importante porque gestionará el acceso a las secciones, así como diferentes botones dependiendo del estado de autentificación del usuario/a.
• Usaremos el componente NavBar de Bulma, ya que es realmente sencillo de utilizar. Como Bulma no trae ninguna lógica consigo, tenemos que crear la funcionalidad para colapsar/descolapsarla nosotros mismos.
• Nuestra componente en VueTalk se llamará NavBarComponent.vue. Por supuesto, tenemos que crearlo y añadir el código mínimo para la barra de navegación.
• Incluimos también el logo de nuestro proyecto, además de algunos estilos CSS y la lógica base. Por supuesto, tenemos que añadir el nuevo componente en App.vue.

<template>
  <div id="app">
    <NavBarComponent />
    <router-view />
  </div>
</template>

• Para hacer que botón hamburguesa funcione, debemos crear la lógica nosotros. Basta con capturar la barra de navegación y el botón a través de las referencias Vue y conmutar la clase modificadora is-active de Bulma.

...
mounted() {
  this.burger = this.$refs.burger;
  this.navBar = this.$refs.navBar;
},
data() {
  return {
    burger: null,
    navBar: null
  };
},
methods: {
  toggleNavBar() {
    this.burger.classList.toggle("is-active");
    this.navBar.classList.toggle("is-active");
  },
},
...

• Y añadir llamada a nuestro nuevo método local toggleNavBar.

<a
  @click.prevent="toggleNavBar"
  role="button"
  class="navbar-burger burger"
	...
>

• Por último y en preparación de la siguiente lección vamos a crear el método doLogout (por ahora vacío) y asociarlo al botón correspondiente.

<a @click="doLogout" class="button is-light">
  Log out
</a>

• Con la barra de navegación lista y hacer logout, es el momento de crear la vista que permitirá al usuario registrarse y hacer login si ya tiene credenciales.