source: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue@ 40dedfb

<script>
import { userStore } from '@/PiniaStores/UserStore.js'
import logout_ from '@/components/Project/Auth/logout_.vue'

export default {
  data() {
    return {
      userStore_: userStore(),
    }
  },
  components: {
    logout_,
  },
}
</script>

<template>
  <nav class="navbar navbar-expand-md navbar-light pt-1 pb-1">
    <div class="container-xxl">
      <router-link to="/" class="navbar-brand">
        <img src="/src/assets/rng_logo.png" alt="Logo could not be found." />
        <span class="fw-bold ms-2"> Reserve And Go </span>
      </router-link>

      <div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link
              v-if="this.userStore_.data.role === 'ROLE_CUSTOMER'"
              to="/favourite_locals"
              class="nav-link">
              Favourite locals
            </router-link>
          </li>
          <li class="nav-item">
            <router-link
              v-if="this.userStore_.data.role === 'ROLE_CUSTOMER'"
              to="/my_reservations"
              class="nav-link"
              >My reservations
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/profilePage" class="nav-link text-white">
              <a v-if="userStore_.data.role !== 'ROLE_ADMIN'">{{userStore_.data.firstName}} {{userStore_.data.lastName}}</a>
            </router-link>
          </li>

          <li class="nav-item ms-2 d-none d-md-inline">
            <router-link to="/login">
              <a v-if="userStore_.data.role === 'UN_AUTHENTICATED'" class="btn btn-dark">Login</a>
            </router-link>
            <router-link to="/register">
              <a v-if="userStore_.data.role === 'UN_AUTHENTICATED'" class="btn btn-dark ms-2">Register</a>
            </router-link>
            <router-link to="/addRestaurant">
              <a v-if="userStore_.data.role === 'ROLE_ADMIN'" class="btn btn-dark me-2">Add Restaurant</a>
            </router-link>
            <logout_></logout_>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<style scoped>
#login {
  float: right;
  padding: 2%;
}

nav {
  background: #8377d1;
  height: 80px;
}

.btn {
  height: 40px;
  margin-top: 5px;
}

img {
  height: 70px;
}
</style>