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

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

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

<template>
  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5 ">
    <div class="container-fluid">
      <router-link to="/" class="navbar-brand d-flex align-items-center">
        <img src="/src/assets/rng_logo.png" alt="Logo" height="50" class="me-2" />
        <span class="fw-bold text-black">Reserve And Go</span>
      </router-link>


      <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
        <ul class="navbar-nav align-items-center">

          <li class="nav-item" v-if="user.data.role === 'ROLE_CUSTOMER'">
            <router-link to="/favourite_locals" class="nav-link text-black">Favourite locals</router-link>
          </li>

          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_CUSTOMER'">
            <router-link to="/my_reservations" class="nav-link text-black">My reservations</router-link>
          </li>

          <li class="nav-item" v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'">

            <router-link to="/profilePage" class="nav-link text-white">
              <i class="fa-solid fa-user"></i>
              {{ user.data.firstName }} {{ user.data.lastName }}
            </router-link>
          </li>

          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
            <router-link to="/login" class="btn btn-dark me-2">Login</router-link>
          </li>

          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
            <router-link to="/register" class="btn btn-dark me-2">Register</router-link>
          </li>

          <li class="nav-item" v-if="user.data.role === 'ROLE_ADMIN'">
            <router-link to="/addRestaurant" class="btn btn-dark me-2">Add Restaurant</router-link>
          </li>

          <li class="nav-item">
            <logout_ />
          </li>

        </ul>
      </div>
    </div>
  </nav>
</template>

<style scoped>
.navbar-brand span {
  font-size: 1.25rem;
}

.custom-background-nav{
  background-color: #8377D1;
}


.navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}
</style>