UnivateProperties/src/components/shared/navBar.vue

<template>
  <!-- eslint-disable max-len -->

  <nav class="navbar navbar-light bg-light navbar-expand-lg fixed-top" style="font-size:18px;">
    <div class="container-fluid">
      <div class="col-md-2">
        <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>
        <div class="navbar-brand text-brand" style="cursor: pointer;" @click="routerGoTo('/')">
          <img
            class="img-fluid"
            src="/img/logos/UVProp.png"
            alt="UVProp logo"
            style="width:110px;height:60px;"
          />
          Uni-Vate
          <span class="color-b">Properties</span>
        </div>
        <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>

      <div class="col-md-8">
        <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
          <ul class="navbar-nav">
            <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/faq')">FAQ</a>
                <div v-if="isLoggedIn">
                  <hr />
                  <a
                    v-if="isLoggedIn"
                    class="dropdown-item cursor-pointer"
                    @click="routerGoTo('/timeshare/sell')"
                  >My Timeshare Weeks</a>
                </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"
              >Properties</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/Commercial/Search')"
                >Search Commercial Properties</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/Commercial/Sale')"
                >To Sell Commercial Properties</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/Commercial/Rental')"
                >To Rent Commercial Properties</a>
                <hr />

                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/Residential/Search')"
                >Search Residential Properties</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/Residential/Sale')"
                >To Sell Residential Properties</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/Residential/Rental')"
                >To Rent Residential Properties</a>
                <hr v-if="isLoggedIn" />
                <a
                  v-if="isLoggedIn"
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/list/Commercial/MyListings')"
                >My Commercial Properties</a>
                <a
                  v-if="isLoggedIn"
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/list/Residential/MyListings')"
                >My Residential 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"
              >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 v-if="isLoggedIn" 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>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/searchLog')"
                >Search Logs</a>
                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
              </div>
            </li>
            <li class="nav-item dropdown" v-if="!isLoggedIn">
              <a
                class="nav-link"
                @click="routerGoTo('/user/login')"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >Login</a>
            </li>
            <li class="nav-item dropdown" v-if="isLoggedIn">
              <span>
                <a class="nav-link" @click="logout(routerGoTo('/user/login'))">Logout</a>
              </span>
              <!-- <span v-else></span> -->
            </li>
            <li>
              <span v-if="isLoggedIn">
                <a>
                  Welcome!
                  <br />
                  {{ NAME }}
                </a>
              </span>
              <span v-else></span>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-2" align="right">
        <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>
    </div>
  </nav>
</template>

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

export default {
  computed: {
    ...mapState('authentication', [
      'user',
      'flag',
      'status',
      'person',
      'token',
    ]),
    NAME() {
      return this.person.fullName;
    },
    isLoggedIn() {
      return this.token !== null && this.token !== undefined;
    },
    // eslint-disable-next-line vue/return-in-computed-property
    Logout() {
      return this.logout();
    },
  },
  methods: {
    ...mapActions('authentication', ['logout']),

    routerGoTo(goTo) {
      this.$emit('routerGoTo', goTo);
    },
  },
};
</script>
<style scoped>
a {
  border: transparent thin solid;
  padding: 5px 12px;
  font-size: 110%;
}
a:hover {
  background-color: rgba(169, 224, 255, 0.75);
  border-radius: 5px;
  border: silver thin solid;
}
</style>