From 36317699795d13c8e5a6909920b13431ba0408ff Mon Sep 17 00:00:00 2001
From: Sebastiaan van Stijn <github@gone.nl>
Date: Tue, 17 Aug 2021 12:14:59 +0200
Subject: [PATCH] _scss: cleanup navigation styles

This fixes various inconsistencies between the landing page and the
other pages by sharing more styles between both:

- fix homepage using a different color for the active tab
- fix homepage not having "hover" styles for the top navigation

I addition, this:

- fixes unwanted whitespace in the hamburger-menu on mobile
- fixes "active" menu item not being highlighted on mobile
- fixes left-side aligning of left-hand menu on desktop

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
---
 _includes/navigation.html |  4 +--
 _layouts/docs.html        |  2 +-
 _scss/_landing.scss       | 18 ----------
 _scss/_mobile.scss        |  6 ++--
 _scss/_navigation.scss    | 71 ++++++++++++++++++++-------------------
 _scss/_night-mode.scss    |  4 +--
 _scss/_utilities.scss     |  2 +-
 7 files changed, 45 insertions(+), 62 deletions(-)

diff --git a/_includes/navigation.html b/_includes/navigation.html
index 56fb21f1f4..07f8d36318 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -20,8 +20,8 @@
     </button>
 </div>
 <div class="nav-container hidden-sm hidden-xs">
-    <div id="tabs">
-        <ul class="tabs jsTOCHorizontal">
+    <div>
+        <ul class="nav navbar-nav">
         {%- for entry in site.data.toc.horizontalnav -%}
           <li><a href="{{ entry.path }}" id="{{ entry.node }}">{{ entry.title }}</a></li>
         {%- endfor -%}
diff --git a/_layouts/docs.html b/_layouts/docs.html
index 9ebb80d267..701bac4165 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -50,7 +50,7 @@
                     <nav class="col-nav">
                         <div id="sidebar-nav" class="sidebar hidden-sm hidden-xs">
                             <div id="navbar" class="nav-sidebar">
-                                <ul class="nav jsTOCHorizontal hidden-md hidden-lg"></ul>
+                                <ul class="nav hidden-md hidden-lg"></ul>
                                 <ul class="nav" id="jsTOCLeftNav"></ul>
                             </div>
                         </div>
diff --git a/_scss/_landing.scss b/_scss/_landing.scss
index 63199c7b7e..34a3958e6c 100644
--- a/_scss/_landing.scss
+++ b/_scss/_landing.scss
@@ -56,24 +56,6 @@ body.landing {
       }
     }
 
-    @include md-width {
-      .navbar-nav > li > a {
-        font-weight: bold;
-        line-height: 25px;
-        padding-top: 17px;
-        padding-bottom: 9px;
-        border-bottom-style: solid;
-        border-bottom-width: 4px;
-        border-bottom-color: rgba(255, 255, 255, 0);
-      }
-    }
-
-    @include md-width {
-      .navbar-nav > li.active > a {
-        border-bottom-color: rgba(255, 255, 255, 0.5);
-      }
-    }
-
     .toggle-mode {
       margin-top: 15px;
 
diff --git a/_scss/_mobile.scss b/_scss/_mobile.scss
index 37b7f06212..950630a3dc 100755
--- a/_scss/_mobile.scss
+++ b/_scss/_mobile.scss
@@ -54,6 +54,7 @@
     and (max-width : 900px) {
     .sidebar {
         position: fixed;
+        top:   55px; // top-navigation bar (without breadcrumbs)
         width: 100%;
         z-index: 100;
         background-color: $bg-sidebar;
@@ -197,7 +198,7 @@
     }
     .sidebar {
         background-color: $bg-sidebar;
-        top: 51px;
+        top: 55px; // top-navigation bar (without breadcrumbs)
         left: 0;
         display: block;
         padding: 0;
@@ -253,9 +254,6 @@
   and (min-device-width: 768px)
   and (max-device-width: 1024px)
   and (orientation: landscape) {
-    .search-form {
-        float: left;
-    }
     .ctrl-right {
         display: block;
     }
diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss
index c1f76d07b1..443ce8f4df 100755
--- a/_scss/_navigation.scss
+++ b/_scss/_navigation.scss
@@ -58,16 +58,12 @@
 
 .nav-sidebar ul {
     list-style: none;
-    padding: 0 15px;
+    padding: 0;
     text-align: left;
 
     li {
         display: block;
     }
-
-    @include lg-width {
-        padding: 0 0 0 7px; // left-padding to align with logo
-    }
 }
 
 .nav-sidebar .nav ul {
@@ -83,10 +79,18 @@
 .nav-sidebar ul li a:focus,
 .nav-sidebar ul li a:hover {
     border-bottom: none;
+    border-left:   4px solid rgba($primary-links, 0);
+}
+
+.nav-sidebar .nav > li > a {
+  padding-left: 22px; // left-padding to align with logo
+  @include before-md-width {
+    padding-right: 32px; // right-align with hamburger menu
+  }
 }
 
 .nav-sidebar ul li a.active,
-.nav-sidebar.nav>li>a:focus {
+.nav-sidebar.nav > li > a:focus {
     background:  $bg-sidebar-active;
     border-left: 4px solid $primary-links;
     font-weight: 600;
@@ -234,37 +238,36 @@ input:checked+.slider:before {
 /*
  * Tabs ************************************************************************
  */
-#tabs {
-    float: left;
-    margin: 0;
-    padding-left: 8px;
-    ul {
-        padding: 0;
-    }
+
+.navbar-nav > li > a {
+  border-left:   4px solid rgba($white, 0.0);
+}
+.navbar-nav > li.active > a {
+  border-left:   4px solid rgba($white, 0.75);
 }
 
-.tabs {
-    li {
-        float: left;
-        list-style: none;
-        a {
-            color: $white;
-            padding: 17px 19px 14px 15px;
-            float: left;
-            font-weight: 600;
-            &:hover {
-                background: rgba(0, 0, 0, 0.17) !important;
-                border-bottom: 4px solid #fff;
-            }
-        }
-    }
-}
+@include md-width {
+  .landing .navbar-nav > li > a {
+    padding-top:    17px;
+    padding-bottom:  9px;
+  }
+  .navbar-nav > li > a {
+    color:          $white;
+    line-height:    25px;
+    padding-top:    14px;
+    padding-bottom: 12px;
+    font-weight:    600;
 
-.tabs li.active a {
-    background: transparent !important;
-    color: #fff;
-    cursor: default;
-    border-bottom: 4px solid #fff;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.17);
+      border-bottom:    4px solid rgba($white, 0.75);
+    }
+  }
+  .navbar-nav > li.active > a {
+    cursor:        default;
+    border-left:   none;
+    border-bottom: 4px solid rgba($white, 0.5);
+  }
 }
 
 /*
diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss
index 48147d2e12..df6f915684 100755
--- a/_scss/_night-mode.scss
+++ b/_scss/_night-mode.scss
@@ -61,8 +61,8 @@ body.night {
         background:  $bg-sidebar-night-active;
         border-left: 4px solid $primary-links;
     }
-    .tabs li.active a {
-        border-bottom: 4px solid $primary-links;
+    .navbar-nav > li.active > a {
+      border-color: $primary-links;
     }
     .slider {
         background-color: #344658;
diff --git a/_scss/_utilities.scss b/_scss/_utilities.scss
index ea74a5378f..cc7e6c4440 100755
--- a/_scss/_utilities.scss
+++ b/_scss/_utilities.scss
@@ -82,7 +82,7 @@ img.inline {
  */
 .search-form {
     float: left;
-    margin: 5px 0 0;
+    margin: 5px 8px 0 0;
     & input[type=text] {
         background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat 10px 9px;
         border: 0;