AppHeader.vue

<template>
  <div class="h-6" />
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1" v-on:click="redirect('/login-main-page')"
      >Main</el-menu-item
    >
    <el-menu-item index="2" v-on:click="redirect('/offer-page')"
      >Offer Page</el-menu-item
    >
    <el-menu-item index="3" v-on:click="redirect('/wishlist-page')"
      >Wish List</el-menu-item
    >
    <el-menu-item index="4" v-on:click="redirect('/flight')"
      >Flight Ticket</el-menu-item
    >
    <el-dropdown
      class="notification"
      v-show="this.$route.name === 'LoginMainPage'"
    >
      <el-button type="primary">
        <font-awesome-icon icon="fa-solid fa-envelope" />
        Notification<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="offer in offers" :key="offer.offerId">
            <router-link
              :to="
                '/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
              "
            >
              You have a offer matched (click to check details)
            </router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-menu-item index="5" class="dock-right" @click="hanldeLogOut()"
      >Log Out</el-menu-item
    >
  </el-menu>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapGetters } from "vuex";
import { OfferNotification } from "@/models/OfferNotification";
export default defineComponent({
  props: ["offers"],
  data() {
    return {};
  },
  name: "LoginMainPage",
  methods: {
    redirect(url: string) {
      this.$router.push(url);
    },
    ...mapActions("auth", {
      logOut: "logOutApi",
    }),
    hanldeLogOut() {
      this.logOut();
      document.cookie =
        "userId=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
      this.$router.push("/");
    },
  },
});
</script>

<style scoped>
.el-menu-demo > .el-menu-item.dock-right {
  margin-left: auto;
}
.notification {
  margin: auto;
  justify-content: space-between;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>