<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>
