reorganize links in the jekyll way

_includes/menu.html

@@ -0,0 +1,5 @@
+<obm-site-nav
+  base-url="{{ site.baseurl }}"
+  bios-url="{{ '/bios/' | relative_url }}"
+  gallery-url="{{ '/gallery/' | relative_url }}"
+></obm-site-nav>

_layouts/bios.html

@@ -3,7 +3,7 @@
     {% include head.html %}
   </head>
 <body>
-  <obm-site-nav></obm-site-nav>
+  {% include menu.html %}
   <main class="container-fluid">
     {{ content }}
   </main>

_layouts/carousel.html

@@ -4,7 +4,7 @@
     <script type="module" src="/lib/modules/components/obm-carousel.js"></script>
   </head>
 <body>
-  <obm-site-nav></obm-site-nav>
+  {% include menu.html %}
   <main class="container-fluid">
     {{ content }}
   </main>

_layouts/collada.html

@@ -5,7 +5,7 @@
     <script type="module" src="/lib/modules/components/obm-collada-viewer.js"></script>
   </head>
 <body>
-  <obm-site-nav></obm-site-nav>
+  {% include menu.html %}
   <main class="container-fluid">
     <div class="row">
       <div class="col-1">

_layouts/default.html

@@ -6,7 +6,7 @@
     <script type="module" src="/lib/modules/components/idf-legend.js"></script>
   </head>
 <body>
-  <obm-site-nav></obm-site-nav>
+  {% include menu.html %}
   <main class="container-fluid">
     <div class="row">
       <h1 class="display-5" data-i18n="home.master">
@@ -18,7 +18,14 @@ <h1 class="display-5" data-i18n="home.master">
         <idf-viewer id="building" src="/models/example.idf" style="height: 500px"></idf-viewer>
       </div>
       <div class="col-sm">
-        <idf-legend viewer="building"></idf-legend>
+        <div class="row">
+          <idf-legend viewer="building"></idf-legend>
+        </div>
+        <div class="row">
+          <a class="btn btn-success" href="{{ '/gallery/' | relative_url }}"  data-i18n="home.try">
+            Passer à la construction
+          </a>
+        </div>
       </div>
     </div>
   </main>

lib/modules/components/obm-navigation.js

@@ -49,13 +49,13 @@ class ObmSiteNav extends HTMLElement {
         }
       </style>
       <nav aria-label="${t("nav.main", locale)}">
-        <a class="logo" href="/" aria-label="${t("nav.home", locale)}">
+        <a class="logo" aria-label="${t("nav.home", locale)}">
           <img src="/img/logoA.svg" alt="OBM">
         </a>
         <button class="toggle" type="button" aria-expanded="false" aria-controls="site-links" aria-label="${t("nav.menu", locale)}">☰</button>
         <div class="links" id="site-links">
-          <a href="/bios.html">BIOS</a>
-          <a href="/gallery.html">${t("nav.gallery", locale)}</a>
+          <a class="bios">BIOS</a>
+          <a class="hvac">${t("nav.gallery", locale)}</a>
         </div>
         <div class="brand">Open Building Management</div>
         <label><span class="visually-hidden">${t("language", locale)}</span>
@@ -65,7 +65,27 @@ class ObmSiteNav extends HTMLElement {
           </select>
         </label>
       </nav>
-      <style>.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }</style>`;
+      <style>
+        .visually-hidden {
+          position: absolute;
+          width: 1px; height: 1px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0, 0, 0, 0);
+          white-space: nowrap;
+          border: 0;
+        }
+      </style>`;
+    const logo = this.root.querySelector(".logo");
+    const baseUrl = this.getAttribute('base-url') || '';
+    logo.setAttribute("href", `${baseUrl}/`);
+    const bios = this.root.querySelector(".bios");
+    const biosUrl = this.getAttribute('bios-url') || '';
+    bios.setAttribute("href", biosUrl);
+    const hvac = this.root.querySelector(".hvac");
+    const galleryUrl = this.getAttribute('gallery-url') || '';
+    hvac.setAttribute("href", galleryUrl);
 
     const button = this.root.querySelector(".toggle");
     const links = this.root.querySelector(".links");

lib/modules/locales/locale-en.js

@@ -60,6 +60,7 @@ export default {
   },
   home: {
     master: "Understand and control your building's operations through a digital twin",
+    try: "Try to build",
     title: "Take control of your energy consumption",
     intro: "At OBM, we take care of your energy systems, including boilers and air handling units.",
     supervision: "We monitor how they operate and work with your facilities operator on preventive maintenance.",

lib/modules/locales/locale-fr.js

@@ -60,6 +60,7 @@ export default {
   },
   home: {
     master: "Maitrisez le fonctionnement de votre bâtiment à travers un jumeau numérique",
+    try: "Passer à la construction",
     title: "Pilotez vos consommations énergétiques",
     intro: "Chez OBM, nous prenons soin de vos systèmes énergétiques, chaudières, centrales de traitement d'air.",
     supervision: "Nous en supervisons le fonctionnement et faisons le lien avec votre exploitant pour la maintenance préventive.",