From a1a9250b93ba0c44e0f96bbf5fe3560ca4938609 Mon Sep 17 00:00:00 2001
From: Tianmaru <tianmaru@gmail.com>
Date: Mon, 25 Dec 2023 02:01:38 +0100
Subject: [PATCH] check for active children in submenus (#1869)

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.
---
 _includes/header.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index bd5987085187..7765c1798a8b 100644
--- 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>