check for active children in submenus (alshedivat#1869)

Tianmaru · web-flow · commit a1a9250b93ba · 2023-12-24T20:01:38.000-05:00
This patch checks, if the title of the current page matches with the
title of a submenu child. If so, it sets the submenu and the
corresponding child as active, highlighting it in the header.
diff --git a/_includes/header.html b/_includes/header.html
@@ -67,9 +67,15 @@
               {%- for p in sorted_pages -%}
               {%- if p.nav and p.autogen == nil -%}
               {%- if p.dropdown %}
-              <li class="nav-item dropdown {% if page.title == p.title %}active{% endif %}">
+              {%- assign has_active_child = false -%}
+              {%- for child in p.children -%}
+              {%- if page.title == child.title -%}
+              {%- assign has_active_child = true -%}
+              {%- endif -%}
+              {%- endfor -%}
+              <li class="nav-item dropdown {% if page.title == p.title or has_active_child %}active{% endif %}">
                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ p.title }}
-                  {%- if page.title == p.title -%}
+                  {%- if page.title == p.title or has_active_child -%}
                   <span class="sr-only">(current)</span>
                   {%- endif -%}
                 </a>
@@ -78,7 +84,7 @@
                   {%- if child.title == 'divider' %}
                   <div class="dropdown-divider"></div>
                   {%- else %}
-                  <a class="dropdown-item" href="{{ child.permalink | relative_url }}">{{ child.title }}</a>
+                  <a class="dropdown-item {% if page.title == child.title %}active{% endif %}" href="{{ child.permalink | relative_url }}">{{ child.title }}</a>
                   {%- endif -%}
                   {% endfor %}
                 </div>
