Indicate active page among sidebar choices

[jwasilgeo]

It might be nice to indicate in the sidebar of the docs which page among its sibling choices is currently active. Thoughts?

Here are some of the files we could consider modifying.

• src\partials\sidebar-examples.hbs
• src\partials\sidebar-documentation.hbs
• src\partials\sidebar-tutorials.hbs

One approach may be to look up the <a> that corresponds to the current url based on href attribute and change the font, color, etc. style attributes (or apply a css class, so on).

A simple working example to prototype this idea:

<script>
  var activeLinkElement = document.querySelector(`a[href*="${window.location.pathname}"]`);

  // this color comes from the sass theme, btw, and happens to be the current color of the font
  // this border bottom is already used for :hover
  activeLinkElement.style.borderBottom = '2px solid #79BD8F';

  activeLinkElement.style.fontWeight = 'bold';
</script>

And here's an example of what that would look like:

[pmacMaps]

I'm in favor of this enhancement for all the pages with the sidebar (tutorials, api reference, and examples). I don't have strong feelings about how to highlight the current page.

It might be nice to see a couple approaches for how to highlight the current page. Another idea is to have the background of the link as a colored tab.