header reactivo

components/layouts/Header.vue

@@ -1,12 +1,19 @@
 <template>
-  <header class="">
+  <header>
     <div class="container">
-      <div class="columns is-vcentered is-gapless is-justify-content-space-around">
-        <div class="column is-narrow">
-          <img src="../../assets/logo_unam.png" alt="logo_unam" />
+      <div class="columns is-mobile is-vcentered is-gapless is-justify-content-space-between">
+        <div class="column is-one-fifth-desktop is-one-third-tablet is-5-mobile my-3 ml-2">
+          <b-image
+            :src="require('@/assets/logo_unam.png')"
+            alt="logo_unam"
+          ></b-image>
         </div>
-        <div class="column is-narrow">
-          <img src="../../assets/logo_acatlan.png" alt="logo_acatlan" />
+
+        <div class="column is-one-fifth-desktop is-one-third-tablet is-5-mobile my-3 mr-2">
+          <b-image
+            :src="require('@/assets/logo_acatlan.png')"
+            alt="logo_unam"
+          ></b-image>
         </div>
       </div>
     </div>
@@ -14,17 +21,12 @@
 </template>
 
 <script>
-export default {}
+export default { }
 </script>
 
 <style scoped>
 header {
   background-color: #1b3d70;
-  /* height:12.5vh; */
-  height: 20vh;
 }
 
-.height-100 {
-  height: 100%;
-}
 </style>

components/layouts/Logout.vue

@@ -1,13 +1,23 @@
 <template>
   <section>
-    <div class="container is-flex is-justify-content-flex-end">
-      <button class="button is-danger is-small my-2">Cerrar Sesión</button>
-    </div>
+    <nav class="container is-flex is-justify-content-flex-end">
+      <b-button type="is-danger" @click="cerrarSesion()">Cerrar Sesión</b-button>
+    </nav>
   </section>
 </template>
 
 <script>
-export default {}
+export default {
+  methods: {
+    cerrarSesion () {
+      // localStorage.removeItem('user')
+      // localStorage.removeItem('token')
+      // localStorage.removeItem('')
+
+      this.$router.push('/')
+    }
+  }
+}
 </script>
 
 <style scoped>