user ribbon redirects to the home page

frontend/src/components/UserRibbon.vue

@@ -2,7 +2,10 @@
   <div class="vue-user-ribon--wrap" aria-hidden="true">
     <p>Vous êtres connecté <strong>{{username}}</strong>.</p>
     <avatar :username="this.username" :src="this.pathToImage"/>
-    <img src="icons/logout.svg" height="40"/>
+    <button class="logout-button" v-on:click="logout">
+      <img src="icons/logout.svg" height="40"/>
+    </button>
+    
   </div>
 </template>
 
@@ -24,6 +27,11 @@ export default {
   },
   components: {
     Avatar
+  },
+  methods: {
+    logout: function() {
+      this.$router.push('/')
+    }
   }
 }
 </script>
@@ -31,8 +39,6 @@ export default {
 <style>
 .vue-user-ribon--wrap{
     display: flex;
-    right: 0;
-    position: absolute;
 }
 
 .vue-user-ribon--wrap *{
@@ -46,4 +52,9 @@ p{
     
     color: white;
 }
+.logout-button{
+  
+    background: transparent;
+    border: none;
+}
 </style>
\ No newline at end of file