Customizations for the left menu

trefle/explorer/app.css

@@ -76,7 +76,7 @@ html, body, a, p, div, li, dl {
   margin: 0;
   padding: 0;
   color: #222;
-  font-family: 'sans';
+  font-family: 'Lato', 'sans', sans-serif;
 }
 html, body {
   width: 100%;
@@ -245,6 +245,11 @@ dl:nth-child(even) {
 .nav-link {
   min-width : 14rem;
   width: 14rem;
+  font-size: 16px;
+}
+
+.nav-link > img {
+  margin-right: 10px;
 }
 
 /* Page content stylesheet */

trefle/explorer/components/navbar.tag.html

@@ -12,39 +12,46 @@
         </li>
         <li class="nav-item">
           <h4>
-            <a href="#schema" class="{selected: window.location.hash.startsWith('#schema')} nav-link text-dark bg-light">Schéma</a>
+			  <a href="." class="{selected: window.location.hash.startsWith('')} nav-link text-dark bg-light"><img src="/explorer/images/Icone_Home.svg" width="18" height="18" class="d-inline-block" alt=""> Accueil</a>
           </h4>
         </li>
         <li class="nav-item">
           <h4>
-            <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light">Règles de gestion</a>
+            <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light"><img src="/explorer/images/Icone_Referentiel.svg" width="18" height="18" class="d-inline-block" alt=""> Référentiel</a>
           </h4>
         </li>
         <li class="nav-item">
           <h4>
-            <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light">Simuler</a>
+            <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link bg-light"><img src="/explorer/images/Icone_Financement.svg" width="18" height="18" class="d-inline-block" alt=""> Financements</a>
           </h4>
         </li>
         <li class="nav-item">
           <h4>
-            <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link text-dark bg-light">Financements</a>
+            <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light"><img src="/explorer/images/Icone_Simulateur.svg" width="18" height="18" class="d-inline-block" alt=""> Simulateur</a>
           </h4>
         </li>
         <li class="nav-item">
           <h4>
-            <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light">Scénarios</a>
+            <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light"><img src="/explorer/images/Icone_Scenarios.svg" width="18" height="18" class="d-inline-block" alt=""> Scénarios</a>
           </h4>
         </li>
         <li class="nav-item">
           <h4>
-            <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light">Outils</a>
+            <b href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light"><img src="/explorer/images/Icone_Outils.svg" width="18" height="18" class="d-inline-block" alt=""> Outils</a>
           </h4>
         </li>
+<!--
         <li class="nav-item">
           <h4>
-            <a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')} nav-link text-dark bg-light">Glossaire</a>
+            <a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')} nav-link bg-light">Glossaire</a>
           </h4>
         </li>
+        <li class="nav-item">
+          <h4>
+			  <a href="#schema" class="{selected: window.location.hash.startsWith('#schema')} nav-link bg-light">Schéma</a>
+          </h4>
+        </li>
+-->
       </ul>
     </div>
     <!-- End vertical navbar -->
@@ -72,10 +79,6 @@
     a + a {
       margin-left: 1em;
     }
-    * {
-      display: flex;
-      align-items: center;
-    }
     progress {
       position: absolute;
       width: 100%;

trefle/explorer/index.html

@@ -8,6 +8,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
 <link rel="stylesheet" type="text/css" href="app.css">