Nav active states

Author: bradfrost

packages/docs/src/_data/navigation.json

@@ -2,11 +2,11 @@
   "items": [
     {
       "label": "Getting Started",
-      "url": "/docs/installing-pattern-lab"
+      "url": "/docs/installing-pattern-lab/"
     },
     {
       "label": "Documentation",
-      "url": "/docs",
+      "url": "/docs/",
       "subnavIsClosed": true,
       "subnav": [
         {
@@ -29,11 +29,11 @@
     },
     {
       "label": "Resources",
-      "url": "/resources"
+      "url": "/resources/"
     },
     {
       "label": "Demos",
-      "url": "/demos"
+      "url": "/demos/"
     },
     {
       "label": "On Github",

packages/docs/src/js/primary-nav.js

@@ -30,11 +30,24 @@
     });
   }
 
+  /**
+   * Expose docs dropdown if on a docs page
+   */
   if (window.location.href.indexOf('docs') > -1) {
-    console.log('yellllll');
     navDropdownListItem.classList.add('is-active');
   }
 
+  var pathName = location.pathname;
+
+  var navLinks = document.querySelectorAll('.c-tree-nav a');
+
+  for (i = 0; i < navLinks.length; i++) {
+    var subnavLink = navLinks[i].getAttribute('href');
+    if (subnavLink == pathName) {
+      navLinks[i].classList.add('is-active');
+    }
+  }
+
   /**
    * Toggles active class on the primary nav panel
    * 1) Select all nav triggers and cycle through them

packages/docs/src/scss/abstracts/_variables.scss

@@ -41,7 +41,7 @@
  * Brand Colors
  * 1) Brand=specific colors
  */
-$color-brand-green: #08ce37;
+$color-brand-green: #0c9f2e;
 $color-brand-green-transparent: rgba(8, 206, 55, 0.05);
 $color-brand-purple-transparent: rgba(220, 193, 232, 0.2);
 
@@ -50,7 +50,7 @@ $color-brand-purple-transparent: rgba(220, 193, 232, 0.2);
  * 1) Neutral colors are grayscale values used throughout the UI
  */
 $color-white: #fff;
-$color-gray-02: #f9f9f9;
+$color-gray-02: #f2f2f2;
 $color-gray-07: #eee;
 $color-gray-13: #ddd;
 $color-gray-27: #bbb;

packages/docs/src/scss/components/_tree-nav.scss

@@ -17,7 +17,8 @@
   font-weight: $font-weight-bold;
   transition: color 0.2s ease;
 
-  &:hover {
+  &:hover,
+  &.is-active {
     color: $color-white;
   }
 
@@ -61,7 +62,8 @@
   margin-bottom: 1rem;
 
   &:hover,
-  &:focus {
+  &:focus,
+  &.is-active {
     color: $color-white;
   }