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

2 files changed, 9 insertions, 26 deletions

diff --git a/website/_includes/footer.html b/website/_includes/footer.html
index c1a373329..20aa9f52c 100644
--- a/website/_includes/footer.html
+++ b/website/_includes/footer.html
@@ -27,25 +27,6 @@ if (!doNotTrack) {
   };
   window.addEventListener("hashchange", shiftWindow);
 
-  var highlightCurrentSidebarNav = function() {
-    var href = location.pathname;
-    var item = $('#sidebar-nav [href$="' + href + '"]');
-    if (item) {
-      var li = item.parent();
-      li.addClass("active");
-
-      if (li.parent() && li.parent().is("ul")) {
-        do {
-          var ul = li.parent();
-          if (ul.hasClass("collapse")) {
-            ul.collapse("show");
-          }
-          li = ul.parent();
-        } while (li && li.is("li"));
-      }
-    }
-  };
-
   $(document).ready(function() {
     // Scroll to anchor of location hash, adjusted for fixed navbar.
     window.setTimeout(function() {
@@ -65,8 +46,5 @@ if (!doNotTrack) {
         toggle.removeClass("dropup");
       }
     });
-
-    // Highlight the current page on the sidebar nav.
-    highlightCurrentSidebarNav();
   });
 </script>
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>