Merge pull request #137 from bhamodi/master

Implemented state awareness for the sidebar.

Author: bhamodi

docs/TODO.md

@@ -8,4 +8,4 @@
 - [ ] scaffold design patterns/examples area
 - [ ] mobile side navbar
 - [ ] build pipeline for examples, create example component, possibly with code editing
-- [ ] add active state to Docs side bar. (currently doesn't show which tab is active/selected)
+- [x] add active state to Docs side bar. (currently doesn't show which tab is active/selected)

docs/sass/main.scss

@@ -255,7 +255,12 @@ pre code.hljs {
 .sidebar-links {
   &--item {
     line-height: 1.2em;
+    margin-top: 1em;
     margin-bottom: 1em;
   }
+  &--item-active {
+    background-color: #E8E4E4;
+    padding: 1em;
+  }
 }
 

docs/src/main.js

@@ -6,9 +6,24 @@ addScrollClass("scrolled")
 
 render(ItemFilterExample, 'item-filter-example')
 
+updateSideBar()
+
 function render(component, id) {
   var el = document.getElementById(id)
   if (el) {
     React.render(React.createElement(ItemFilterExample), el)
   }
 }
+
+function updateSideBar() {
+  var sideBarElements = document.getElementsByClassName('sidebar-links--item')
+  for (var i in sideBarElements) {
+    if (sideBarElements[i].firstChild) {
+      if (window.location.href === sideBarElements[i].firstChild.href) {
+        sideBarElements[i].className = 'sidebar-links--item-active'
+      } else {
+        sideBarElements[i].className = 'sidebar-links--item'
+      }
+    }
+  }
+}