Improve docs sidenav active link highlighting

Capture the slug once before applying it and add a slash to it to so we get a unique string to match against instead of a fuzzy partial 'contains'. Helps avoid 'grid' highlighting 'flexbox-grid', for example.

diff --git a/docs/_includes/nav-docs.html b/docs/_includes/nav-docs.html
index fa29841883429d5069d5d80a791c6ae7e3311623..b4f4d1f9ecaeb4461c99c5dfe5f0444bcb1f15fc 100644 (file)
--- a/docs/_includes/nav-docs.html
+++ b/docs/_includes/nav-docs.html
@@ -25,6 +25,7 @@
       <ul class="nav bd-sidenav">
         {% for doc in group.pages %}
           {% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
+          {% capture slug %}/{{ slug }}{% endcapture %}
           {% assign active = nil %}
 
           {% if page.url contains slug %}