Aprende a dominar la plataforma Firebase

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.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue