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

<script>


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


export default {
  data() {
    return {
      userStore_: userStore()
    }
  },
  components: {
    logout_
  }

}



</script>

<template>

<!--  <div class="container-fluid bg-primary">
    <div class="row align-items-center">

     <div class="col-8">
    <img src="/src/assets/logo.png" alt="Logo could not be found." />
     </div>


      <div class="col-4">


      <a href="" class="btn btn-danger btn-sm ">Омилени Локали</a>



         <a href="" class="btn btn-danger btn-sm ">Твојте Резервации</a>



    <a href="" class="btn btn-danger btn-sm ">Login</a>



      </div>
&lt;!&ndash;    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque.</p>
    <p class="lead text-end">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="lead text-center text-warning bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>&ndash;&gt;

&lt;!&ndash;    <p class="container-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, quos?</p>&ndash;&gt;
    </div>
  </div>-->
  <!-- navbar -->

  <nav class="navbar navbar-expand-md navbar-light pt-1 pb-1 ">
    <div class="container-xxl">
      <!-- navbar brand / title -->

      <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>



      <!-- navbar links -->
      <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 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_LOCAL_MANAGER' || 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>