exchange/resources/assets/js/components/Navbar.vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container">
      <router-link :to="{ name: user ? 'home' : 'welcome' }" class="navbar-brand">
        {{ appName }}
      </router-link>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
        <span class="navbar-toggler-icon"/>
      </button>

      <div id="navbarToggler" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <locale-dropdown/>
        </ul>

        <ul class="navbar-nav ml-auto">
          <!-- Authenticated -->
          <template v-if="user">
            <el-dropdown trigger="click">
              <el-badge :value="unreadMessage.length > 0 ? unreadMessage.length : ''" class="item">
                <el-button v-if="loadingNotification" icon="el-icon-loading" circle ></el-button>
                <el-button v-else icon="el-icon-bell" circle v-on:click="refreshNotificatoin"></el-button>
              </el-badge>
              <el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification" >
                <a v-for="item in notification" :href="item.link">
                  <el-dropdown-item>
                    {{item.detail}}
                  </el-dropdown-item>
                </a>
              </el-dropdown-menu>
            </el-dropdown>

            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-dark"
               href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
              {{ user.name }}
            </a>
            <div class="dropdown-menu">
              <router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
                <fa icon="cog" fixed-width/>
                {{ $t('settings') }}
              </router-link>

              <div class="dropdown-divider"/>
              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
                <fa icon="sign-out-alt" fixed-width/>
                {{ $t('logout') }}
              </a>
            </div>
          </li>
          </template>
          </li>
          <!-- Guest -->
          <template v-else>
            <li class="nav-item">
              <router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
                {{ $t('login') }}
              </router-link>
            </li>
            <li class="nav-item">
              <router-link :to="{ name: 'register' }" class="nav-link" active-class="active">
                {{ $t('register') }}
              </router-link>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import { mapGetters } from 'vuex'
import LocaleDropdown from './LocaleDropdown'
import axios from 'axios'

export default {
  components: {
    LocaleDropdown
  },

  data: () => ({
    appName: window.config.appName,
    notification:[],
    loadingNotification:false,
    unreadMessage:null

  }),

  computed: mapGetters({
    user: 'auth/user'
  }),
  mounted(){
    this.getNotification();
  },
  methods: {
    async logout () {
      // Log out the user.
      await this.$store.dispatch('auth/logout');

      // Redirect to login.
      this.$router.push({ name: 'login' });
    },
    getNotification(){
      this.notification = [];
      this.unreadMessage='';
      this.loadingNotification=true;
      axios
        .get('/api/notification/user/')
        .then((response) => {
          this.loadingNotification=false;
          this.notification = response.data.message;
          this.unreadMessage=response.data.unread_message;
          console.log(response.data);
        }).catch((error) => {
          console.log(error)
          this.$router.push({
            name: 'notfound'
          })
        })
    },
    refreshNotificatoin(){
      this.readAllNotification();
      this.getNotification();
    },
    readAllNotification(){
      axios
        .post('/api/notification/read-notification/')
        .then((response) => {
          // Done
        }).catch((error) => {
          console.log(error)
          this.$router.push({
            name: 'notfound'
          })
        })
    }
  }
}
</script>

<style scoped>
.profile-photo {
  width: 2rem;
  height: 2rem;
  margin: -.375rem 0;
}
</style>