modif du css navbar

front-end/src/components/NavBar.vue

@@ -6,63 +6,86 @@
 
     <ul class="ul-nav">
     <li>
-        <RouterLink class="li-solo" to="/">
+      <RouterLink class="li-solo" to="/">
-        <span class="material-icons">space_dashboard</span>
+        <span class="nav-left">
-        <span>DASHBOARD</span>
+          <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="material-icons">person</span>
+        <span class="nav-left">
-        <span>CLIENT</span>
+          <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="material-icons">sell</span>
+        <span class="nav-left">
-        <span>TICKET</span>
+          <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>
+        
+        <li>
+          <span class="nav-left">
+          <RouterLink class="li-solo" to="/ticket">
             <span class="material-icons">add</span>
             <span>Nouveau</span>
-          </li>
+            </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="material-icons">work</span>
+       <span class="nav-left">
-       <span>INTERVENTION</span>
+         <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">
+      <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>
@@ -93,38 +116,70 @@ const toggleCLient = () => {
 <style scoped>
 .container-nav {
   user-select: none;
-  font-family: 'Fira Sans';font-size: 16px;
+  font-family: 'Fira Sans';
+  font-size: 16px;
   font-weight: bold;
   color: #2D4570;
 }
-.ul-nav > li{
- display: flex;
- align-items: center;
- justify-content: start;
- margin-top: 1rem;
-}
-.ul-nav > li > span {
- padding-right: 1vw;
-   align-self: end;
-}
-.li-solo > span{
-   padding-right: 1vw;
-   align-self: end;
-}
 
-.ul-nav{
+/* 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-left:1vw;
-margin-top:2vh;
+  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>
+</style>