Add menu highlighting based on route

Author: addyosmani

src/scripts/controller/ActivityController.js

@@ -14,6 +14,8 @@ export default class ActivityController {
     // Show loading dialog while we get content
     this.loader.classList.remove('is-hidden');
 
+    this.updateNavDrawer(path);
+
     fetch('/partials' + path)
       .then((response) => {
         if (response.status === 404) {
@@ -61,4 +63,17 @@ export default class ActivityController {
       ', sorry about that.';
     this.mainContainer.appendChild(paragraphElement);
   }
+
+  updateNavDrawer(path) {
+    var nodeList = document.querySelectorAll('.side-nav__body a');
+    [].forEach.call(nodeList, function(el) {
+      // Reset active states
+      el.classList.remove('active');
+      // We could compare against path, but easier to compare
+      // against the current document href
+      if (el.href === document.location.href) {
+        el.classList.add('active');
+      }
+    });
+  }
 }

src/styles/core/_side-nav.scss

@@ -134,3 +134,8 @@
   line-height: 48px;
   text-decoration: none;
 }
+
+.side-nav__blog-post.active {
+  font-weight: bold;
+  background-color: rgba(0,0,0,.05);
+}