adding a top-side horizontal menu to the side-menu

trefle/explorer/app.css

@@ -231,6 +231,19 @@ dl:nth-child(even) {
 
 /* Navbar stylesheet */
 
+.horizontal-nav {
+  min-width: 100%;
+  width: 100%;
+  height: 5rem;
+  min-height: 5rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  transition: all 0.4s;
+  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
+  z-index: 0;
+}
+
 .vertical-nav {
   min-width: 14rem;
   width: 14rem;
@@ -243,16 +256,24 @@ dl:nth-child(even) {
 }
 
 #nav-title {
-  font-size: 1em;
+  font-size: 3em;
   margin-bottom:1rem;
-  margin-top:1rem;
+  margin-top:.5rem;
+  padding: .3rem 3rem;
 }
 
-.nav-link {
+.vertical-nav .nav-link {
   min-width : 14rem;
   width: 14rem;
   font-size: 16px;
-  padding: .5rem 3rem;
+  padding: 1rem 3rem;
+}
+
+.horizontal-nav .nav-link {
+  min-width : 1rem;
+  width: 5rem;
+  font-size: 16px;
+  padding: .5rem 1rem;
 }
 
 .nav-icon {
@@ -265,6 +286,7 @@ dl:nth-child(even) {
 .page-content {
   width: calc(100% - 15rem);
   margin-left: 15rem;
+  margin-top: 3rem;
   transition: all 0.4s;
 }
 

trefle/explorer/components/navbar.tag.html

 <navbar>
   <progress style="display: none" id="progress" />
 
+      <!-- Horizontal navbar -->
+    <div class="horizontal-nav bg-light" id="sidebar">
+
+      <ul class="nav bg-light mb-0">
+        <li class="nav-item bg-light">          
+        </li>
+        <li class="nav-item bg-light">          
+        </li>
+        <li class="nav-item bg-light">          
+        </li>
+        <li class="nav-item bg-light">          
+        </li>
+        <li class="nav-item bg-light">          
+        </li>
+        <li class="nav-item bg-light">          
+        </li>
+      </ul>
+    </div>
+
       <!-- Vertical navbar -->
     <div class="vertical-nav bg-light" id="sidebar">
 
       <ul class="nav flex-column bg-light mb-0">
         <li class="nav-item bg-light">
-            <h1>
-              <a href="." id="nav-title" class="nav-link text-dark">☘</a>
-            </h1>
+          <a href="." id="nav-title" class="nav-link text-dark">☘</a>
         </li>
         <li class="nav-item">
-          <h4>
-			      <a href="." class="{selected: window.location.hash.startsWith('')} nav-link text-dark bg-light">
-              <img src="/explorer/images/Icone_Home.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
-              Accueil
-            </a>
-          </h4>
+          <a href="." class="{selected: window.location.hash.startsWith('')} nav-link text-dark bg-light">
+            <img src="/explorer/images/Icone_Home.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
+            Accueil
+          </a>
         </li>
         <li class="nav-item">
-          <h4>
-            <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light">
-              <img src="/explorer/images/Icone_Referentiel.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
-              Référentiel
-            </a>
-          </h4>
+          <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light">
+            <img src="/explorer/images/Icone_Referentiel.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
+            Référentiel
+          </a>
         </li>
         <li class="nav-item">
-          <h4>
-            <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link bg-light">
-              <img src="/explorer/images/Icone_Financement.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
-              Financements
-            </a>
-          </h4>
+          <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link text-dark bg-light">
+            <img src="/explorer/images/Icone_Financement.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
+            Financements
+          </a>
         </li>
         <li class="nav-item">
-          <h4>
-            <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light">
-              <img src="/explorer/images/Icone_Simulateur.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
-              Simulateur
-            </a>
-          </h4>
+          <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light">
+            <img src="/explorer/images/Icone_Simulateur.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
+            Simulateur
+          </a>
         </li>
         <li class="nav-item">
-          <h4>
-            <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light">
-              <img src="/explorer/images/Icone_Scenarios.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
-              Scénarios
-            </a>
-          </h4>
+          <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light">
+            <img src="/explorer/images/Icone_Scenarios.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
+            Scénarios
+          </a>
         </li>
         <li class="nav-item">
-          <h4>
-            <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light">
-              <img src="/explorer/images/Icone_Outils.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
-              Outils
-            </a>
-          </h4>
+          <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light">
+            <img src="/explorer/images/Icone_Outils.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
+            Outils
+          </a>
         </li>
 <!--
         <li class="nav-item">

trefle/explorer/index.html

@@ -11,6 +11,8 @@
 <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">
+<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
+<link rel="icon" href="images/favicon.ico" type="image/x-icon">
 
 <script type="text/javascript" src="mixin/view.mixin.js"></script>
 <script type="text/javascript" src="app.js"></script>