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(),
      managerLocalId: '',
    }
  },
  methods: {
    fetchLocalForManager() {
      fetch('http://localhost:8080/api/local-manager/my-local', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: this.user.getToken,
        },
      })
        .then((res) => res.json())
        .then((data) => (this.managerLocalId = data.id))
        .catch((err) => console.log(err))
    },
  },
  mounted() {
    if (this.user && this.user.data.role === 'ROLE_LOCAL_MANAGER') {
      this.fetchLocalForManager()
    }
  },
}
</script>

<template>
  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5">
    <div class="container-fluid">
      <router-link
        v-if="user.data.role !== 'ROLE_LOCAL_MANAGER'"
        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
        v-if="user.data.role === 'ROLE_LOCAL_MANAGER'"
        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>
      </div>

      <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="{name: 'favourite_locals', params:{ mode: 'favourites'} }" 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 pe-3" v-if="user.data.role === 'ROLE_ADMIN'">
            <router-link to="/admin-dashboard" class="nav-link text-black">Dashboard</router-link>
          </li>
          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
            <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black"
              >My Restaurant</router-link
            >
          </li>

          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
            <router-link to="/manager-dashboard" class="nav-link text-black">Dashboard</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">
            <logout_ />
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

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

.custom-background-nav {
  background-color: #5ea5bc;
}

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