Add arrow for main nav ecosystem and resources dropdown (#59)

* Add arrows for main nav ecosystem and resources dropdown

Author: Bgreen23

_includes/main_menu.html

@@ -6,8 +6,8 @@
 
     <li class="main-menu-item {% if current[1] == 'ecosystem' or current[1] == 'hub' %}active{% endif %}">
 
-      <div class="ecosystem-dropdown">
-        <a id="dropdownMenuButton" data-toggle="ecosystem-dropdown">
+      <div id="dropdownMenuButton" data-toggle="ecosystem-dropdown" class="ecosystem-dropdown">
+        <a class="ecosystem-option with-right-white-arrow">
           Ecosystem
         </a>
         <div class="ecosystem-dropdown-menu">
@@ -41,8 +41,8 @@
 
     <li class="main-menu-item {% if current[1] == 'resources' or current[1] == 'features' %}active{% endif %}">
 
-      <div class="resources-dropdown">
-        <a id="resourcesDropdownButton" data-toggle="resources-dropdown">
+      <div id="resourcesDropdownButton" data-toggle="resources-dropdown" class="resources-dropdown">
+        <a class="resource-option with-right-white-arrow">
           Resources
         </a>
         <div class="resources-dropdown-menu">

_sass/navigation.scss

@@ -242,6 +242,32 @@
     cursor: pointer;
   }
 
+  .ecosystem-dropdown, .resources-dropdown {
+    .with-right-white-arrow {
+      padding-right: rem(32px);
+      position: relative;
+      background-image: url($baseurl + "/assets/images/chevron-right-white.svg");
+      background-size: 7px 12px;
+      background-position: top 7px right 15px;
+      background-repeat: no-repeat;
+      &:hover {
+        background-image: url($baseurl + "/assets/images/chevron-right-orange.svg");
+      }
+    }
+
+    .with-down-white-arrow {
+      padding-right: rem(32px);
+      position: relative;
+      background-image: url($baseurl + "/assets/images/chevron-down-white.svg");
+      background-size: 13px 13px;
+      background-position: top 7px right 10px;
+      background-repeat: no-repeat;
+      &:hover {
+        background-image: url($baseurl + "/assets/images/chevron-down-orange.svg");
+      }
+    }
+  }
+
   .dropdown-menu {
     border-radius: 0;
     padding: 0;

assets/images/chevron-down-white.svg

@@ -1,9 +1,11 @@
 $("[data-toggle='ecosystem-dropdown']").on("click", function() {
   toggleDropdown($(this).attr("data-toggle"));
+  toggleArrowClass(".ecosystem-option");
 });
 
 $("[data-toggle='resources-dropdown']").on("click", function() {
   toggleDropdown($(this).attr("data-toggle"));
+  toggleArrowClass(".resource-option");
 });
 
 function toggleDropdown(menuToggle) {
@@ -17,3 +19,7 @@ function toggleDropdown(menuToggle) {
     $(menuClass).addClass(showMenuClass);
   }
 }
+
+function toggleArrowClass(dropdown) {
+  $(dropdown).toggleClass("with-right-white-arrow with-down-white-arrow");
+}