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>
        <a class="navbar-brand text-brand" @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>
        </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>

      <div class="col-md-8">
        <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 dropdowsn">
              <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
                  v-if="showLogout"
                  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"
              >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="showLogout" />
                <a
                  v-if="showLogout"
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/property/list/Commercial/MyListings')"
                >My Commercial Properties</a>
                <a
                  v-if="showLogout"
                  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="showLogout" 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">
              <a
                class="nav-link"
                v-if="hideLogin"
                @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">
              <span v-if="showLogout">
                <a class="nav-link" @click="logout()">Logout</a>
              </span>
              <span v-else></span>
            </li>
            <li>
              <span v-if="showLogout">
                <a>Welcome! {{ }}</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 { mapGetters, mapActions } from 'vuex';

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

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

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