Navigation WIP

Author: bradfrost

packages/docs/src/_includes/components/icon-chevron-down.njk

@@ -1,4 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<svg class="{{ className }}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
 <title>cheveron-down</title>
 <path d="M9.293 12.95l0.707 0.707 5.657-5.657-1.414-1.414-4.243 4.242-4.243-4.242-1.414 1.414z"></path>
 </svg>

packages/docs/src/_includes/components/tree-nav.njk

@@ -3,11 +3,13 @@
 <nav class="c-tree-nav">
     <ul class="c-tree-nav">
         {% for item in navigation.items %}
-        <li class="c-tree-nav__item">
+        <li class="c-tree-nav__item {% if item.subnav %}js-nav-dropdown{% endif %}">
             {% if item.subnav %}
             <button class="c-tree-nav__link c-tree-nav__link--btn js-nav-dropdown-trigger">
                 {{ item.label }}
+                {% set className = "c-tree-nav__icon" %}
                 {% include "components/icon-chevron-down.njk" %}
+                
             </button>
 
             <ul class="c-tree-nav__subnav">

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

@@ -9,6 +9,7 @@
  * 4) If the nav dropdown trigger parent does not have an active class, add it.
  */
 (function() {
+  var navDropdownListItem = document.querySelector('.js-nav-dropdown');
   var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */
 
   for (i = 0; i < navLink.length; i++) {
@@ -29,6 +30,11 @@
     });
   }
 
+  if (window.location.href.indexOf('docs') > -1) {
+    console.log('yellllll');
+    navDropdownListItem.classList.add('is-active');
+  }
+
   /**
    * Toggles active class on the primary nav panel
    * 1) Select all nav triggers and cycle through them