UnivateProperties/src/components/shared/navBar.vue

<template>
  <!-- eslint-disable max-len -->
  <nav class="navbar navbar-default navbar-trans navbar-expand-lg fixed-top">
    <div class="container">
      <button
        class="navbar-toggler collapsed"
        type="button"
        data-toggle="collapse"
        data-target="#navbarDefault"
        aria-controls="navbarDefault"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a class="navbar-brand text-brand" @click="routerGoTo('/')">
        Uni-Vate
        <span class="color-b">Properties</span>
      </a>
      <button
        type="button"
        class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
        data-toggle="collapse"
        data-target="#navbarTogglerDemo01"
        aria-expanded="false"
      >
        <span class="fa fa-search" aria-hidden="true"></span>
      </button>
      <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" @click="routerGoTo('/')">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >About</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/about/us')">About Us</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/about/timeshare')"
              >About Timeshare</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Timeshare</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">To Buy</a>
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">To Sell</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/timeshare/sell')"
              >My Timeshare Weeks</a>
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Residential</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/Residential/Search')"
              >Search</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/Residential/Rental')"
              >To Rent</a>
              <div
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/Residential/Sale')"
              >To Sell</div>
              <div
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/list/Residential/MyListings')"
              >My Residential Properties</div>
              <div
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/list/Residential/All')"
              >Admin Residential Properties</div>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Commercial</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/Commercial/Search')"
              >Search</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/Commercial/Rental')"
              >To Rent</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/Commercial/Sale')"
              >To Sell</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/list/Commercial/MyListings')"
              >My Commercial Properties</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/property/list/Commercial/All')"
              >Admin Commercial Properties</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Admin</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')">Status</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/status/timeshareAdmin')"
              >Timeshare Week Admin</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/status/tenderWeekAdmin')"
              >Tender Week Management</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/unitConfiguration/list')"
              >Unit Configuration</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/status/userManagementPage')"
              >User Management & Access</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/status/changeLogPage')"
              >Changes Logs</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/userDefinedGroups/list')"
              >Property User Defined Groups</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/propertyTypes/list')"
              >Property Types</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" @click="routerGoTo('/contactus')">Contact</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Login</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
              <a
                class="dropdown-item cursor-pointer"
                @click="routerGoTo('/user/registeragency')"
              >Agency</a>
            </div>
          </li>
        </ul>
      </div>
      <button
        type="button"
        class="btn btn-b-n navbar-toggle-box-collapse d-none d-md-block"
        data-toggle="collapse"
        data-target="#navbarTogglerDemo01"
        aria-expanded="false"
      >
        <span class="fa fa-search" aria-hidden="true"></span>
      </button>
    </div>
    <span v-if="showLogout">
      <a @click="logout()">Logout</a>
    </span>
    <span v-else></span>
  </nav>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  data() {
    return {};
  },
  computed: {
    showLogout() {
      return this.$store.state.authentication.status === 'success';
    },
    Logout() {
      return this.$store.state.authentication.methods.logout;
    },
  },

  methods: {
    ...mapGetters('authentication', ['isLoggedIn']),
    ...mapActions('authentication', ['logout']),

    routerGoTo(goTo) {
      console.log(goTo);
      this.$emit('routerGoTo', goTo);
    },
  },
};
</script>