Ticketing-app/front-end/src/components/NavBar.vue

<template>
  <div class="container-nav">
    <div class="nav-logo">
      <img src="/logologoWsl.svg" alt="Logo" />
    </div>

    <ul class="ul-nav">
    <li>
      <RouterLink class="li-solo" to="/">
        <span class="nav-left">
          <span class="material-icons">space_dashboard</span>
          <span>DASHBOARD</span>
        </span>
      </RouterLink>
    </li>
    </ul>

    <ul class="ul-nav">
        <li class="li-nav-list" @click="toggleCLient">
        <span class="nav-left">
          <span class="material-icons">person</span>
          <span>CLIENT</span>
        </span>
        <span class="material-icons">arrow_drop_down</span>
      </li>
      <ul v-show="showClient" class="ul-nav">
          <li>
            <span class="nav-left">
            <span class="material-icons">person_add</span>
            <span>Nouveau</span>
            </span>
          </li>
          <li>
            <span class="nav-left">
            <span class="material-icons">list</span>
            <span>Liste</span>
            </span>
          </li>
        </ul>
    </ul>

    <ul class="ul-nav">
      <li class="li-nav-list" @click="toggleTicket">
        <span class="nav-left">
          <span class="material-icons">sell</span>
          <span>TICKET</span>
        </span>
        <span class="material-icons">arrow_drop_down</span>
      </li>
      <ul v-show="showTicket" class="ul-nav">
        
        <li>
          <span class="nav-left">
          <RouterLink class="li-solo" to="/ticket">
            <span class="material-icons">add</span>
            <span>Nouveau</span>
            </RouterLink>
            </span>
          </li>  
          <li>
            <span class="nav-left">
            <span class="material-icons">list</span>
            <span>Liste</span>
            </span>
          </li>
        </ul>
    </ul>

    <ul class="ul-nav">
      <li class="li-nav-list" @click="toggleIntervention">
       <span class="nav-left">
         <span class="material-icons">work</span>
         <span>INTERVENTION</span>
       </span>
       <span class="material-icons">arrow_drop_down</span>
      </li>
      <ul v-show="showIntervention" class="ul-nav ">
          <li>
            <span class="nav-left">
            <span class="material-icons">calendar_month</span>
            <span>Calendrier</span>
            </span>
          </li>
          <li>
            <span class="nav-left">
            <span class="material-icons">list</span>
            <span>Liste</span> 
            </span>
          </li>
        </ul>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// chaque menu a sa propre variable
const showTicket = ref(false)
const showIntervention = ref(false)
const showClient = ref(false)

const toggleTicket = () => {
  showTicket.value = !showTicket.value
}

const toggleIntervention = () => {
  showIntervention.value = !showIntervention.value
}

const toggleCLient = () => {
    showClient.value = !showClient.value
}
</script>

<style scoped>
.container-nav {
  user-select: none;
  font-family: 'Fira Sans';
  font-size: 16px;
  font-weight: bold;
  color: #2D4570;
}

/* Make list items take full width so a border-bottom can span the entire line */
.ul-nav {
  padding-left: 1rem;
  padding-top: 0.01rem;
}
.ul-nav > li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1rem;
  box-sizing: border-box;
  padding: 0.25rem 0;
}

.ul-nav > li > span {
  padding-right: 1vw;
  align-self: end;
}

.li-solo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.li-solo:visited{
  color: inherit;
}


.li-nav-list {
  cursor: pointer;
}

.nav-logo{
  margin-left:1vw;
  margin-top:2vh;
}
.nav-left > .material-icons{
  margin-right:0.3vw;
}
.nav-left{display:inline-flex;align-items:end;position:relative}
.nav-left::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:#2D4570;
  transform-origin:0 50%;
  transform:scaleX(0);
  transition:transform .22s ease;
}
.ul-nav > li:hover .nav-left::after{transform:scaleX(1)}

.ul-nav > li:visited { color: inherit }

/* If you prefer the underline only on the link element (RouterLink),
   uncomment the following instead and comment the rule above:
.li-solo:hover { border-bottom: 2px solid #2D4570; }
*/

</style>