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

<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="/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 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>