Merge pull request #166 from dod-ccpo/ui/emphatic-subnav

Ui/emphatic subnav

styles/components/_workspace_layout.scss

@@ -6,15 +6,20 @@
 
 .workspace-navigation {
   @include panel-margin;
+  margin-bottom: $gap * 4;
 
   ul {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     li {
       flex-grow: 1;
     }
   }
 
+  @include media($medium-screen) {
+    margin-bottom: $gap * 5;
+  }
+
   @include media($large-screen) {
     width: 20rem;
     margin-right: $gap * 2;

styles/elements/_sidenav.scss

@@ -29,8 +29,8 @@
 
     &.sidenav__link--active {
       @include h4;
-      background-color: $color-white;
       color: $color-primary;
+      background-color: $color-white;
       box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
 
       .sidenav__link-icon {
@@ -38,20 +38,32 @@
       }
 
       + ul {
-        background-color: $color-white;
+        background-color: $color-primary;
 
         .sidenav__link {
+          color: $color-white;
+          background-color: $color-primary;
+
+          &:hover {
+            background-color: $color-blue-darker;
+          }
+
           &--active {
             @include h5;
-            color: $color-primary;
+            color: $color-white;
+            background-color: $color-primary;
             box-shadow: none;
           }
+
+          .icon {
+            @include icon-color($color-white);
+          }
         }
       }
     }
 
     + ul {
-      padding-bottom: $gap / 2;
+      // padding-bottom: $gap / 2;
 
       li {
         .sidenav__link {

templates/navigation/workspace_navigation.html

@@ -26,11 +26,6 @@
           "href": "",
           "active": g.matchesPath('/workspaces/members/new'),
           "icon": "plus"
-        },
-        {
-          "label": "Editing Member",
-          "href": "",
-          "active": g.matchesPath('/workspaces/123456/members/789/edit')
         }
       ]
     ) }}