From 7b7086cc1e0da1124c3f37c7d1d7dc637792493d Mon Sep 17 00:00:00 2001
From: Antoine BRYJA <antoine.bryja@outlook.fr>
Date: Mon, 10 Nov 2025 18:05:30 +0100
Subject: [PATCH] add icon nav bar

---
 front-end/index.html                |  4 ++
 front-end/src/components/NavBar.vue | 91 +++++++++++++++++++++++------
 2 files changed, 77 insertions(+), 18 deletions(-)
diff --git a/front-end/index.html b/front-end/index.html
index baf1bf7..d5fd901 100644
--- a/front-end/index.html
+++ b/front-end/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
+    <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
   </head>
diff --git a/front-end/src/components/NavBar.vue b/front-end/src/components/NavBar.vue
index b4ab5fd..8bc5e0c 100644
--- a/front-end/src/components/NavBar.vue
+++ b/front-end/src/components/NavBar.vue
@@ -1,40 +1,69 @@
 <template>
   <div class="container-nav">
-    <div class="nav-logo" style="margin-left:1vw;margin-top:1vh;">
+    <div class="nav-logo">
       <img src="/logologoWsl.svg" alt="Logo" />
     </div>
 
-    <ul>
-      <li><RouterLink to="/"><span><img src="/dashboard.svg"/></span>DASHBOARD</RouterLink></li>
+    <ul class="ul-nav">
+    <li>
+        <RouterLink class="li-solo" to="/">
+        <span class="material-icons">space_dashboard</span>
+        <span>DASHBOARD</span>
+      </RouterLink>
+    </li>
     </ul>
 
-    <ul>
+    <ul class="ul-nav">
         <li class="li-nav-list" @click="toggleCLient">
-        <span><img src="/client.svg"/></span>CLIENT <span><img src="/arrow.svg" /></span>
+        <span class="material-icons">person</span>
+        <span>CLIENT</span>
+        <span class="material-icons">arrow_drop_down</span>
       </li>
-      <ul v-show="showClient">
-          <li><span><img src="/addUser.svg"/></span>Nouveau</li>
-          <li><span><img src="/list.svg"/></span>Liste</li>
+      <ul v-show="showClient" class="ul-nav">
+          <li>
+            <span class="material-icons">person_add</span>
+            <span>Nouveau</span>
+          </li>
+          <li>
+            <span class="material-icons">list</span>
+            <span>Liste</span>
+          </li>
         </ul>
     </ul>
 
-    <ul>
+    <ul class="ul-nav">
       <li class="li-nav-list" @click="toggleTicket">
-        <span><img src="/ticket.svg"/></span>TICKET <span><img src="/arrow.svg" /></span>
+        <span class="material-icons">sell</span>
+        <span>TICKET</span>
+        <span class="material-icons">arrow_drop_down</span>
       </li>
-      <ul v-show="showTicket">
-          <li><span><img src="/add.svg"/></span>Nouveau</li>
-          <li><span><img src="/list.svg"/></span>Liste</li>
+      <ul v-show="showTicket" class="ul-nav">
+          <li>
+            <span class="material-icons">add</span>
+            <span>Nouveau</span>
+          </li>
+          <li>
+            <span class="material-icons">list</span>
+            <span>Liste</span>
+          </li>
         </ul>
     </ul>
 
-    <ul>
+    <ul class="ul-nav">
       <li class="li-nav-list" @click="toggleIntervention">
-       <span><img src="/inter.svg"/></span> INTERVENTION <span><img src="/arrow.svg" /></span>
+       <span class="material-icons">work</span>
+       <span>INTERVENTION</span>
+       <span class="material-icons">arrow_drop_down</span>
       </li>
-      <ul v-show="showIntervention">
-          <li><span><img src="/calandar.svg"/></span>Calendrier</li>
-          <li><span><img src="/list.svg"/></span>Liste</li>
+      <ul v-show="showIntervention" class="ul-nav">
+          <li>
+            <span class="material-icons">calendar_month</span>
+            <span>Calendrier</span>
+          </li>
+          <li>
+            <span class="material-icons">list</span>
+            <span>Liste</span> 
+          </li>
         </ul>
     </ul>
   </div>
@@ -64,10 +93,36 @@ const toggleCLient = () => {
 <style scoped>
 .container-nav {
   user-select: none;
+  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{
+  padding-left: 1rem;
+  padding-top: 0.01rem;
+}
 .li-nav-list {
   cursor: pointer;
+
+}
+.nav-logo{
+margin-left:1vw;
+margin-top:2vh;
 }
 
 
