Top nav sections improvements (#18)

* first try

* bug fix

* bug fix

* improvement

* bug fix

* replace underscore

* code style

* simple css title nav

Author: bedroesb

_includes/sidebar.html

@@ -7,13 +7,13 @@
 {%- capture collecting -%}{%- if page.url == "/collecting.html" -%}st6{%- else -%}st16{%- endif -%}{%- endcapture -%}
 {%- capture sharing -%}{%- if page.url == "/sharing.html" -%}st7{%- else -%}st17{%- endif -%}{%- endcapture -%}
 <button class="btn text-start d-lg-none collapsed sidebar-collapse w-100 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#side-nav" aria-controls="side-nav" aria-expanded="true" aria-label="Toggle navigation">
-    {{ page.sidebar | capitalize }} menu <i title="navbar-toggler" class="fa fa-bars ms-2"></i>
+    {{ page.sidebar | capitalize | replace: "_", " " }} menu <i title="navbar-toggler" class="fa fa-bars ms-2"></i>
 </button>
 <nav class="collapse" id="side-nav" aria-label="Side navigation">
     <ul id="menu" class="menu list-unstyled mb-4 mb-lg-0">
-        {% if sidebar.title or sidebar.version %}
+        {%- if sidebar.title or sidebar.version %}
         <li class="sidebar-title">{{sidebar.title}} {{sidebar.version}}</li>
-        {% endif %}
+        {%- endif %}
         {%- for folder in sidebar.subitems %}
         {%- if page.url == folder.url %}
         <li class="active{%- if folder.hr %} mt-3{% endif %}">

_includes/topnav.html

@@ -11,12 +11,14 @@
             <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
                 <ul class="navbar-nav">
                     <!-- navigation entries -->
-                    {%- assign topnav = site.data.topnav -%}
+                    {%- assign topnav = site.data.topnav %}
                     {%- for item in topnav.subitems %}
                     <li class="nav-item {% if item.subitems %}dropdown {% endif %}ms-0 ms-lg-3 mt-2 mt-lg-0">
-                        {%- if item.external_url -%}
+                        {%- assign page_sidebar = page.sidebar | downcase | replace: "-", "_" | replace: " ", "_" %}
+                        {%- assign nav_title = item.title | downcase | replace: "-", "_" | replace: " ", "_" %}
+                        {%- if item.external_url %}
                         <a class="nav-link ps-2" href="{{item.external_url}}" target="_blank" rel="noopener">{{item.title}}</a>
-                        {%- elsif page.url contains item.url %}
+                        {%- elsif page.url contains item.url or page_sidebar == nav_title %}
                         <a class="nav-link ps-2 active" aria-current="page" href="{{item.url | relative_url }}">{{item.title}}</a>
                         {%- elsif item.subitems %}
                         <a class="nav-link ps-2 dropdown-toggle" href="#" id="Dropdown{{item.title | jsonify }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">{{item.title}}</a>
@@ -40,6 +42,9 @@
                         {%- endif %}
                     </li>
                     {%- endfor %}
+                    {%- if topnav.subitems.size > 1 %}
+                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0 nav-break"></li>
+                    {%- endif %}
                     <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
                         <a class="nav-link ps-2 d-flex align-items-center" href="{{site.github.repository_url}}"><i class="fab fa-github me-2"></i>GitHub</a>
                     </li>

assets/css/main.scss

@@ -133,6 +133,18 @@ header .navbar {
     }
 }
 
+// Break line in top navigation
+
+.nav-break {
+    @media (min-width: 992px) {
+        width: 1px;
+    }
+    @media (max-width: 992px) {
+        height: 1px;
+    }
+    background-color: rgba($nav-link-color, 0.3);
+}
+
 /*-----Search box top navigation-----*/
 
 .search-results {
@@ -255,8 +267,6 @@ header .navbar {
 }
 
 .sidebar-title {
-    margin: 11px 0px;
-    font-weight: 800;
     font-size: 1.3em;
 }