UnivateProperties/src/components/shared/navBar.vue

<template>
  <div>
    <!-- <button type="button" id="mobile-nav-toggle">
      <i class="fa fa-bars"></i>
    </button> -->
    <div id="header-sticky-wrapper" class="sticky-wrapper is-sticky" style="min-height: 120px;">
      <header id="header" style="width: 100%; position: fixed; top:0px; z-index: 50;">
        <div class="container">
          <div class="row">
            <div id="logo" class="col-md-3 col-xs-4 pull-left">
              <a href="/">
                <img
                  class="img-fluid"
                  src="/img/logos/UVProp.png"
                  alt="UVProp logo"
                  style="height:100px;"
              /></a>
            </div>
            <div class="col-md-9" id="topbar">
              <div class="container clearFix">
                <div class="social-links  ">
                  <a href="mailto:info@univateproperties.co.za">
                    <i class="fa fa-envelope"></i>
                  </a>
                  <a href="https://www.facebook.com/univateproperties/" target="_blank">
                    <i class="fa fa-facebook"></i>
                  </a>
                  <a href="#">
                    <i class="fa fa-youtube"></i>
                  </a>
                  <a href="tel:0123456789">
                    <i class="fa fa-phone"></i>
                    <span class="phoneIconDetail">+27 (0) 12 492 1238</span>
                  </a>
                  <a href="#" data-toggle="modal" data-target="#bondcal">
                    <i class="fa fa-calculator" aria-hidden="true"></i>
                    <span class="bondCalculatorDetail">Bond Calculator</span>
                  </a>
                </div>
              </div>

              <nav id="nav-menu-container">
                <ul class="nav-menu sf-js-enabled sf-arrows">
                  <li class="menu-has-children">
                    <div
                      @mouseover="timeShareClass = 'ts-display'"
                      @mouseleave="timeShareClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">
                      Timeshare
                    </a>
                    <ul style="margin-top:-10px;text-align:left" :class="timeShareClass">
                      <li>
                        <router-link to="/timeshare/buy">To Buy</router-link>
                      </li>
                      <li>
                        <router-link to="/timeshare/sell">To Sell</router-link>
                      </li>
                      <li>
                        <router-link to="/timeshare/faq">FAQ</router-link>
                      </li>
                      <li v-if="isLoggedIn">
                        <hr />
                        <router-link to="/timeshare/myWeeks">My Timeshare Weeks</router-link>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <router-link to="/property/commercial">Commercial</router-link>
                  </li>
                  <li>
                    <router-link to="/property/residential">Residential</router-link>
                  </li>
                  <!-- <li class="menu-has-children">
                    <div
                      @mouseover="propertiesClass = 'ts-display'"
                      @mouseleave="propertiesClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">
                      Properties
                    </a>
                    <ul style="margin-top:-10px;text-align:left" :class="propertiesClass">
                      <li>
                        <router-link to="/property/Search">Search</router-link>
                      </li>
                      <li>
                        <router-link to="/property/new/Sale">To Sell</router-link>
                      </li>
                      <li>
                        <router-link to="/property/new/Rental">To Rent</router-link>
                      </li>
                      <li v-if="isLoggedIn">
                        <hr />
                        <router-link to="/properties">My Properties</router-link>
                      </li>
                    </ul>
                  </li> -->
                  <li>
                    <router-link to="/propertyManagement">Property Management</router-link>
                  </li>
                  <li class="menu-has-children">
                    <div
                      @mouseover="aboutClass = 'ts-display'"
                      @mouseleave="aboutClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">
                      About
                    </a>
                    <ul style="margin-top:-10px; text-align:left" :class="aboutClass">
                      <li>
                        <router-link to="/about/us">About Us</router-link>
                      </li>
                      <li>
                        <router-link to="/about/timeshare">About Timeshare Resales</router-link>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <router-link to="/share/contact">Contact Us</router-link>
                  </li>
                  <li v-if="isLoggedIn" class="menu-has-children">
                    <div
                      @mouseover="userClass = 'ts-display'"
                      @mouseleave="userClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul">
                      {{ NAME }}
                    </a>
                    <ul style="margin-top:-10px;text-align:left" :class="userClass">
                      <li>
                        <router-link to="/status/list">Status</router-link>
                      </li>
                      <li>
                        <router-link to="/status/timeshareAdmin">Timeshare Week Admin</router-link>
                      </li>
                      <li>
                        <router-link to="/status/tenderWeekAdmin"
                          >Tender Week Management</router-link
                        >
                      </li>
                      <li>
                        <router-link to="/unitConfiguration/list">Unit Configuration</router-link>
                      </li>
                      <li>
                        <router-link to="/communication/template">Templates</router-link>
                      </li>
                      <hr />
                      <li>
                        <router-link to="/status/userManagementPage"
                          >User Management & Access</router-link
                        >
                      </li>
                      <li>
                        <router-link to="/status/changeLogPage">Changes Logs</router-link>
                      </li>
                      <li>
                        <router-link to="/userDefinedGroups/list"
                          >Property User Defined Groups</router-link
                        >
                      </li>
                      <li>
                        <router-link to="/propertyTypes/list">Property Types</router-link>
                      </li>
                      <hr />
                      <li>
                        <router-link to="/searchLog">Search Logs</router-link>
                      </li>
                      <li>
                        <router-link to="/Offers">Offers</router-link>
                      </li>
                      <li>
                        <router-link to="/Carousel">Carousel</router-link>
                      </li>
                      <li>
                        <router-link to="/user/updateProfileInfo">Update Info</router-link>
                      </li>
                      <li>
                        <router-link to="/payments">Payments</router-link>
                      </li>
                      <li>
                        <router-link to="/landingPages">Landing Pages / Campaignes</router-link>
                      </li>
                      <li>
                        <a class="btn-white-border p-2" @click="logout(routerGoTo('/user/login'))"
                          >Logout</a
                        >
                      </li>
                    </ul>
                  </li>
                  <li v-if="!isLoggedIn">
                    <router-link class="btn-white-border p-2" to="/user/login">Login</router-link>
                  </li>

                  <li v-if="!isLoggedIn" class="menu-has-children">
                    <div
                      @mouseover="registerClass = 'ts-display'"
                      @mouseleave="registerClass = 'no-display'"
                    ></div>
                    <a href="#" class="sf-with-ul btn-solid-blue pt-2 pb-1" style="height:39px">
                      Register
                    </a>
                    <ul style="margin-top:-10px;text-align:left" :class="registerClass">
                      <li>
                        <router-link to="/user/register">Register</router-link>
                      </li>
                      <li>
                        <router-link to="/user/registeragency">Agency Registration</router-link>
                      </li>
                    </ul>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </header>
    </div>
    <div
      class="modal fade"
      id="bondcal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="modal-bondcal"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content pt-4">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body pt-3">
            <bondCalculator />
          </div>
        </div>
        <!-- modal-content -->
      </div>
      <!-- modal-dialog -->
    </div>
    <!-- modal -->
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import Log from "../../assets/Log";
import bondCalculator from "../misc/bondCaclculator";

export default {
  components: {
    bondCalculator
  },
  data() {
    return {
      hover: false,
      timeShareClass: "no-display",
      propertiesClass: "no-display",
      aboutClass: "no-display",
      userClass: "no-display",
      registerClass: "no-display"
    };
  },
  methods: {
    ...mapActions("authentication", ["logout"]),
    showDropDown() {
      if (!this.hover) {
        this.timeShareClass = "ts-display";
      }
    },
    routerGoTo(goTo) {
      this.$emit("routerGoTo", goTo);
    }
  },
  computed: {
    ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
    isLoggedIn() {
      console.log(Log.isLoggedIn());
      return Log.isLoggedIn();
    },
    NAME() {
      return Log.getPerson().name;
    },
    // eslint-disable-next-line vue/return-in-computed-property
    Logout() {
      return this.logout();
    }
  }
};
</script>

<style lang="scss" scoped>
.no-display {
  display: none;
}

.ts-display {
  display: block;
}

.phoneIconDetail {
  margin-left: 3px;
}

.bondCalculatorDetail {
  margin-left: 3px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .phoneIconDetail {
    display: none;
  }

  .bondCalculatorDetail {
    display: none;
  }

  #header {
    min-height: 145px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #header {
    min-height: 145px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #header {
    min-height: 120px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}
</style>