RestaurantSite/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 offset-1">
        <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/FoodIcon.png"
            alt="UVProp logo"
            style="width:110px;height:60px;"
          />
          Fork-Ing Fast
        </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"
        ></button>
      </div>
      <div class="col-md-1 offset-2">
        <div class="input-group-prepend">
          <input type="text" placeholder="search" />
          <span class="input-group-text" @click="Search">
            <i class="fa fa-search" style="color:#24aae1"></i>
          </span>
        </div>
      </div>
      <div class="col-md-5">
        <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
          <ul class="navbar-nav">
            <li class="nav-item dropdown" v-if="!isLoggedIn">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >Register</a>
              <!--@click="routerGoTo('/RegistrationPage')" -->
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/Registration')"
                >Individual User</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/RegisterRestaurant')"
                >Restaurant</a>
              </div>
            </li>

            <li class="nav-item dropdown" v-if="isLoggedIn">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                v-if="isLoggedIn"
              >{{ SystemRole }}</a>
              <div
                v-if="SystemRole === 'Customer'"
                class="dropdown-menu"
                aria-labelledby="navbarDropdown"
              >
                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/MyDetails')">My Details</a>
                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/MyOrders')">My Orders</a>
              </div>
              <div
                v-if="SystemRole === 'RestaurantAdmin' || SystemRole === 'RestaurantUser'"
                class="dropdown-menu"
                aria-labelledby="navbarDropdown"
              >
                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Restaurant')">Details</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/MenuCategory')"
                >Menu Categories</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/MenuOptions')"
                >Menu Options</a>
                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/RestaurantMenu')">Menu</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/status/timeshareAdmin')"
                >Orders</a>
                <hr />
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/RestaurantUsers')"
                >Users</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/RestaurantRoles')"
                >Roles</a>
              </div>
              <div
                v-if="SystemRole === 'SuperAdmin'"
                class="dropdown-menu"
                aria-labelledby="navbarDropdown"
              >
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/RestuarantList')"
                >Restaurants</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/RestaurantCategory')"
                >Restaurant Categories</a>
                <a
                  class="dropdown-item cursor-pointer"
                  @click="routerGoTo('/CustomerList')"
                >Customers</a>
              </div>
            </li>
            <li class="nav-item dropdown" v-if="!isLoggedIn">
              <a
                class="nav-link"
                @click="routerGoTo('/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('/login'))">Logout</a>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <button type="button" class="btn btn-b-n" style="border-radius:20px" @click="GoToCart">
        <eva-icon name="shopping-cart-outline" fill="white"></eva-icon>
        <label>
          <b>&nbsp;&nbsp;{{ CartCount }}</b>
        </label>
      </button>
    </div>
  </nav>
</template>

<script>
import { mapState, mapActions } from "vuex";
// import Log from "../../assets/Log";

export default {
  computed: {
    //...mapState("authentication", ["user", "flag", "status", "person", "token"]),
    ...mapState("cart", ["cartItems"]),
    isLoggedIn() {
      // console.log(Log.isLoggedIn());
      // return Log.isLoggedIn();
      return false;
    },
    NAME() {
      //return Log.getPerson().name;
      return "UserName";
    },
    SystemRole() {
      return "Customer";
      //return "SuperAdmin";

      //return "RestaurantAdmin";
    },
    // eslint-disable-next-line vue/return-in-computed-property
    Logout() {
      return this.logout();
    },
    CartCount() {
      return this.cartItems.length;
    },
  },
  methods: {
    //...mapActions("authentication", ["logout"]),
    routerGoTo(goTo) {
      this.$emit("routerGoTo", goTo);
    },
    Search() {
      this.$router.push("/search");
    },
    GoToCart() {
      this.$router.push("/Cart");
    },
  },
};
</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>