From e4772bd84512c03ca431701dc139e126a885abd4 Mon Sep 17 00:00:00 2001
From: Ian Lewis <ianlewis@google.com>
Date: Wed, 24 Mar 2021 17:54:45 -0700
Subject: Fix highlighting sidebar menu on the website

Highlighting previously highlighted multiple items in the sidebar if the had
the same page name (not full url). This change simplifies this by adding the
highlight class in the jekyll template rather than javascript, and highlights
only the correct page.

PiperOrigin-RevId: 364931350
---
 website/_layouts/docs.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

(limited to 'website/_layouts/docs.html')

diff --git a/website/_layouts/docs.html b/website/_layouts/docs.html
index d45a781a4..5b95dc071 100644
--- a/website/_layouts/docs.html
+++ b/website/_layouts/docs.html
@@ -20,15 +20,20 @@ categories:
             {% comment %}If all pages in the subcategory are excluded don't show it.{% endcomment %}
             {% if sorted_pages.size > 0 %}
               {% if subcategory.name != "" %}
-                {% assign ac = "aria-controls" %}
                 {% assign cid = category | remove: " " | downcase %}
                 {% assign sid = subcategory.name | remove: " " | downcase %}
                 <li>
-                  <a class="sidebar-nav-heading" data-toggle="collapse" href="#{{ cid }}-{{ sid }}" aria-expanded="false" {{ ac }}="{{ cid }}-{{ sid }}">{{ subcategory.name }}<span class="caret"></span></a>
-                  <ul class="collapse sidebar-nav sidebar-submenu" id="{{ cid }}-{{ sid }}">
+                  {% comment %}
+                  If the current page is in the sub-category then set the collapsible to expanded.
+                  See: https://getbootstrap.com/docs/3.3/javascript/#collapse
+                  {% endcomment %}
+                  {% assign expanded = false %}
+                  {% for p in sorted_pages %}{% if page.url == p.url %}{% assign expanded = true %}{% endif %}{% endfor %}
+                  <a class="sidebar-nav-heading" data-toggle="collapse" href="#{{ cid }}-{{ sid }}" {% if expanded %}aria-expanded="true"{% else %}aria-expanded="false"{% endif %} aria-controls="{{ cid }}-{{ sid }}">{{ subcategory.name }}<span class="caret"></span></a>
+                  <ul class="collapse{% if expanded %} in{% endif %} sidebar-nav sidebar-submenu" id="{{ cid }}-{{ sid }}">
               {% endif %}
               {% for p in sorted_pages %}
-                <li><a href="{{ p.url }}">{{ p.title }}</a></li>
+                <li{% if page.url == p.url %} class="active"{% endif %}><a href="{{ p.url }}">{{ p.title }}</a></li>
               {% endfor %}
               {% if subcategory.name != "" %}
                 </li>
-- 
cgit v1.2.3