From dbe4953982536fd89f1de158121323dbee63a815 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Drouet?= <jeremie.drouet@gmail.com>
Date: Wed, 20 May 2020 09:48:43 +0200
Subject: [PATCH] move navbar to burger menu on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
---
 _includes/navigation.html |  6 +++---
 _includes/side-menu.html  |  5 ++++-
 _scss/_mobile.scss        | 41 +++++++++++++++++++--------------------
 _scss/_navigation.scss    | 11 ++++++++---
 js/docs.js                |  4 +++-
 5 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/_includes/navigation.html b/_includes/navigation.html
index f83b06983d..418d577234 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -15,13 +15,13 @@
         <span class="icon-bar"></span>
     </button>
 </div>
-<div class="nav-container">
+<div class="nav-container hidden-sm hidden-xs">
     <div id="tabs">
-        <ul class="tabs" id="jsTOCHorizontal">
+        <ul class="tabs jsTOCHorizontal">
 
         </ul>
     </div>
-    <div class="ctrl-right hidden-xs hidden-sm">
+    <div class="ctrl-right">
         <a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
         {% include archive-list.html %}
     </div>
diff --git a/_includes/side-menu.html b/_includes/side-menu.html
index f800f927cb..9bfeee0f0e 100644
--- a/_includes/side-menu.html
+++ b/_includes/side-menu.html
@@ -1,4 +1,7 @@
-{% if page.landing == true %}<div id="navbar" class="nav-sidebar">{%else%}<div id="navbar" class="nav-sidebar">{% endif %}
+<div id="navbar" class="nav-sidebar">
+    <ul class="nav jsTOCHorizontal hidden-md hidden-lg">
+    </ul>
+    <div class="divider hidden-md hidden-lg"></div>
     <ul class="nav" id="jsTOCLeftNav">
     </ul>
 </div>
diff --git a/_scss/_mobile.scss b/_scss/_mobile.scss
index 233002f816..2a1ff0a5e5 100755
--- a/_scss/_mobile.scss
+++ b/_scss/_mobile.scss
@@ -4,9 +4,9 @@
 *
 */
 
-@media only screen 
+@media only screen
     and (min-width : 376px)
-    and (max-width : 1150px) {  
+    and (max-width : 1150px) {
     .nav-primary,
     .hero-text,
     .banner,
@@ -55,9 +55,9 @@
     }
   }
 
-@media only screen 
+@media only screen
     and (min-width : 376px)
-    and (max-width : 900px) {  
+    and (max-width : 900px) {
     .sidebar {
         position: fixed;
         width: 100%;
@@ -76,8 +76,8 @@
 */
 
 /* Portrait and Landscape */
-@media only screen 
-  and (min-device-width: 320px) 
+@media only screen
+  and (min-device-width: 320px)
   and (max-device-width: 670px)  {
     .logo,
     .hero-text,
@@ -92,8 +92,8 @@
 }
 
 /* Portrait */
-@media only screen 
-  and (min-device-width: 320px) 
+@media only screen
+  and (min-device-width: 320px)
   and (max-device-width: 667px)
   and (orientation: portrait) {
     h1,
@@ -121,7 +121,6 @@
     .nav-secondary-tabs,
     .nav-secondary {
         background-color: $black;
-        height: 100px;
     }
     .nav-secondary input[type=search] {
         background: rgb(78, 77, 77) url(/images/search.png) no-repeat 10px 9px;
@@ -143,7 +142,7 @@
         font-size: 12px;
     }
     .content {
-        padding: 120px 25px;
+        padding: 65px 25px;
     }
     .main-content {
         padding: 10px 25px;
@@ -212,9 +211,9 @@
 }
 
 /* Landscape */
-@media only screen 
-  and (min-device-width: 320px) 
-  and (max-device-width: 667px) 
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 667px)
   and (orientation: landscape) {
     h1,
     h2,
@@ -284,8 +283,8 @@
 */
 
 
-@media only screen 
-  and (min-device-width: 768px) 
+@media only screen
+  and (min-device-width: 768px)
   and (max-device-width: 1110px) {
     .logo {
         margin: 12px 10px 0 10px;
@@ -316,9 +315,9 @@
 }
 
 /* Portrait */
-@media only screen 
-  and (min-device-width: 768px) 
-  and (max-device-width: 1024px) 
+@media only screen
+  and (min-device-width: 768px)
+  and (max-device-width: 1024px)
   and (orientation: portrait) {
     .nav-secondary input[type=search] {
         background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px;
@@ -326,9 +325,9 @@
 }
 
 /* Landscape */
-@media only screen 
-  and (min-device-width: 768px) 
-  and (max-device-width: 1024px) 
+@media only screen
+  and (min-device-width: 768px)
+  and (max-device-width: 1024px)
   and (orientation: landscape) {
     .search-form {
         float: left;
diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss
index fb75a86383..b1bb8cb897 100755
--- a/_scss/_navigation.scss
+++ b/_scss/_navigation.scss
@@ -164,7 +164,7 @@
 
 .collapsed
 {
-    cursor:pointer;   
+    cursor:pointer;
 }
 
 /*
@@ -308,7 +308,7 @@ input:checked+.slider:before {
 #tabs {
     float: left;
     margin: 0;
-    padding-left: 8px; 
+    padding-left: 8px;
     ul {
         padding: 0;
     }
@@ -384,4 +384,9 @@ input:checked+.slider:before {
     margin: 2px 0 0;
 }
 
-
+.divider {
+    height: 1px;
+    margin: 9px 35px;
+    overflow: hidden;
+    background-color: #077CBC;
+}
diff --git a/js/docs.js b/js/docs.js
index a4fa6b488b..0d11521ee5 100644
--- a/js/docs.js
+++ b/js/docs.js
@@ -104,7 +104,9 @@ function renderNav(docstoc) {
         }
         outputHorzTabs.push('><a href="' + docstoc.horizontalnav[i].path + '">' + docstoc.horizontalnav[i].title + "</a></li>\n");
     }
-    document.getElementById("jsTOCHorizontal").innerHTML = outputHorzTabs.join("");
+    document.querySelectorAll('.jsTOCHorizontal').forEach(function(element) {
+        element.innerHTML = outputHorzTabs.join("");
+    });
     document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
 }