go
/
gvisor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
Ian Lewis 2021-03-24 17:54:45 -07:00 committed by gVisor bot
parent e7ca2a51a8
commit e4772bd845
2 changed files with 9 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
website/_includes/footer.html
View File

@ -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>

13
website/_layouts/docs.html
View File

@ -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>