Remove logout from user widget, Fix missing user in article header

client/src/components/LogoutWidget.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="logout-widget">
+    <button class="logout-widget__logout" @click="logout()">Logout</button>
+  </div>
+</template>
+
+<script>
+  import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
+
+  export default {
+
+    methods: {
+      logout() {
+        this.$apollo.mutate({
+          mutation: LOGOUT_MUTATION,
+        }).then(({data}) => {
+          if (data.logout.success) { location.replace('/') }
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .logout-widget {
+    color: $color-grey;
+    display: flex;
+    align-items: center;
+
+    &__logout {
+      font-family: $sans-serif-font-family;
+      line-height: 16px;
+      margin: 0 15px 0 20px;
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      outline: inherit;
+    }
+  }
+</style>

client/src/components/UserWidget.vue

@@ -3,28 +3,17 @@
     <user-icon class="user-widget__avatar" :src="avatar"></user-icon>
     <span class="user-widget__name">{{firstName}} {{lastName}}</span>
     <span class="user-widget__date" v-if="date">{{date}}</span>
-    <button class="user-widget__logout" @click="logout()">Logout</button>
   </div>
 </template>
 
 <script>
   import UserIcon from '@/components/icons/UserIcon';
-  import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
 
   export default {
     props: ['firstName', 'lastName', 'avatar', 'date'],
 
     components: {
       UserIcon
-    },
-    methods: {
-      logout() {
-        this.$apollo.mutate({
-          mutation: LOGOUT_MUTATION,
-        }).then(({data}) => {
-          if (data.logout.success) { location.replace('/') }
-        });
-      }
     }
   }
 </script>
@@ -47,18 +36,6 @@
       font-family: $sans-serif-font-family;
     }
 
-    &__logout {
-      font-family: $sans-serif-font-family;
-      line-height: 16px;
-      margin: 0 15px 0 20px;
-      background: none;
-      color: inherit;
-      border: none;
-      padding: 0;
-      cursor: pointer;
-      outline: inherit;
-    }
-
     &__avatar {
       width: 30px;
       height: 30px;

client/src/layouts/DefaultLayout.vue

@@ -3,8 +3,10 @@
     <header class="header skillbox__header">
       <top-navigation></top-navigation>
       <router-link to="/" class="skillbox__header-logo">skillbox</router-link>
-      <user-widget v-bind="me"></user-widget>
-
+      <div class="user-header">
+        <user-widget v-bind="me"></user-widget>
+        <logout-widget></logout-widget>
+      </div>
     </header>
 
     <filter-bar v-if="showFilter"></filter-bar>
@@ -18,13 +20,15 @@
   import TopNavigation from '@/components/TopNavigation.vue';
   import UserWidget from '@/components/UserWidget.vue';
   import FilterBar from '@/components/FilterBar.vue';
+  import LogoutWidget from '@/components/LogoutWidget.vue';
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
   export default {
     components: {
       TopNavigation,
       UserWidget,
-      FilterBar
+      FilterBar,
+      LogoutWidget
     },
 
     computed: {
@@ -151,4 +155,8 @@
       -ms-grid-column: 1;
     }
   }
+
+  .user-header {
+    display: flex;
+  }
 </style>