- Menu on the side

- Bootstrap 4

by LD

trefle/explorer/app.css

@@ -154,7 +154,7 @@ input[type=submit]:hover,
   word-wrap: normal;
   direction: ltr;
   font-variant: normal;
-  vertical-align: middle;
+  vertical-align: baseline;
   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
@@ -176,7 +176,9 @@ textarea {
 /************** Tool Tip Styles ********************************/
 .tooltip {
   position: relative;
+  opacity:100;
   cursor: help;
+  display: inline;
 }
 .tooltip:hover {
   text-decoration: underline dotted;
@@ -227,3 +229,33 @@ dl:nth-child(even) {
   background: #f3f3f3;
 }
 
+/* Navbar stylesheet */
+
+.vertical-nav {
+  min-width: 14rem;
+  width: 14rem;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s;
+}
+
+.nav-link {
+  min-width : 14rem;
+  width: 14rem;
+}
+
+/* Page content stylesheet */
+
+.page-content {
+  width: calc(100% - 15rem);
+  margin-left: 15rem;
+  transition: all 0.4s;
+}
+
+.page-title {
+  margin-bottom : 3rem;
+  font-variant: small-caps;
+}

trefle/explorer/components/catalog.tag.html

 <catalog>
   <section>
-    <h2>Catalogue</h2>
+    <h2 class="page-title">Catalogue</h2>
     <form onsubmit={ this.submit }>
       <input type="text" ref="intercarif" placeholder="Identifiant INTERCARIF" name="intercarif">
       <input type="submit" value="Chercher">

trefle/explorer/components/financements.tag.html

 <financements>
-  <h2>Liste des types de financements <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/financements.yml target=_blank><i class="icon">edit</i></a></h2>
+  <h2 class="page-title">Liste des types de financements <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/financements.yml target=_blank></a><i class="icon" style="vertical-align: baseline;">edit</i></h2>
   <dl each={ this.financements }>
     <dt>{ intitule }</dt>
     <dd if={ racine.endsWith('.rules') }><strong>Règles racine</strong>: <a href="#/rules/{ racine }">{ racine } <i class="icon">arrow_forward</i></a></dd>

trefle/explorer/components/glossary.tag.html

 <glossary>
+  <h2 class="page-title">Glossaire</h2>
   <dl each={ props, name in this.items }>
     <dt>{name}</dt>
     <dd>{ props.description || props }</dd>

trefle/explorer/components/navbar.tag.html

 <navbar>
   <progress style="display: none" id="progress" />
-  <h1><a href=".">☘</a></h1>
-  <nav>
-    <a href="#schema" class="{selected: window.location.hash.startsWith('#schema')}">Schéma</a>
-    <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')}">Règles de gestion</a>
-    <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')}">Simuler</a>
-    <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')}">Financements</a>
-    <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')}">Scénarios</a>
-    <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')}">Outils</a>
-    <a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')}">Glossaire</a>
-  </nav>
+
+      <!-- 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" style="margin-bottom:4em">
+            <h1>
+              <a href="." class="nav-link text-dark">☘</a>
+            </h1>
+        </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>
+          </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>
+          </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>
+          </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>
+          </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>
+          </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>
+          </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>
+          </h4>
+        </li>
+      </ul>
+    </div>
+    <!-- End vertical navbar -->
 
   <style scoped>
+
     :scope {
       display: grid;