Fix side nav to match designs and delete unused html and css

styles/elements/_sidenav.scss

@@ -72,7 +72,7 @@
       &.sidenav__list--padded {
         margin-top: 3 * $gap;
         margin-bottom: $footer-height;
-        padding:  0 $gap ($gap * 2);
+        padding-bottom: ($gap * 2);
         position: fixed;
         overflow-y: scroll;
         top: $topbar-height + $usa-banner-height + 4rem;
@@ -109,100 +109,19 @@
     &__link {
       display: block;
       padding: $gap ($gap * 2);
-      color: $color-black;
-      text-decoration: none;
       white-space: nowrap;
       overflow: hidden;
+      color: $color-black-light;
+      text-decoration: none;
       text-overflow: ellipsis;
 
-      &-icon {
-        margin-left: -($gap * 0.5);
-      }
-
-      &--disabled {
-        color: $color-shadow;
-        pointer-events: none;
-      }
-
-      &--add {
-        color: $color-blue;
-        font-size: $small-font-size;
-
-        .icon {
-          @include icon-color($color-blue);
-          @include icon-size(14);
-        }
-      }
-
       &--active {
         @include h4;
 
-        color: $color-primary;
         background-color: $color-aqua-lightest;
-        box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
+        box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
-
-        .sidenav__link-icon {
-          @include icon-style-active;
-        }
-
         position: relative;
-
+        color: $color-primary-darker;
-        &_indicator .icon {
-          @include icon-color($color-primary);
-
-          position: absolute;
-          right: 0;
-        }
-
-        + ul {
-          background-color: $color-primary;
-
-          .sidenav__link {
-            color: $color-white;
-            background-color: $color-primary;
-
-            &:hover {
-              background-color: $color-blue-darker;
-            }
-
-            &--active {
-              @include h5;
-
-              color: $color-white;
-              background-color: $color-primary;
-              box-shadow: none;
-            }
-
-            .icon {
-              @include icon-color($color-white);
-            }
-          }
-        }
-      }
-
-      + ul {
-        li {
-          .sidenav__link {
-            @include h5;
-
-            padding: $gap * 0.75;
-            padding-left: 4.5rem;
-            border: 0;
-            font-weight: normal;
-
-            .sidenav__link-icon {
-              @include icon-size(12);
-
-              flex-shrink: 0;
-              margin-right: 1.5rem;
-              margin-left: -3rem;
-            }
-
-            .sidenav__link-label {
-              padding-left: 0;
-            }
-          }
-        }
       }
 
       &:hover {

templates/components/sidenav_item.html

@@ -1,35 +1,11 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%}
+{% macro SidenavItem(label, href, active=False) -%}
   <li>
     <a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
-    {% if icon %}
-      {{ Icon(icon, classes="sidenav__link-icon") }}
-    {% endif %}
-
       <span class="sidenav__link-label">
         {{label}}
       </span>
-    {% if active %}
-      <span class="sidenav__link-active_indicator">
-        {{ Icon("caret_right") }}
-      </span>
-      {% endif %}
     </a>
-
-  {% if subnav and active %}
-      <ul>
-      {% for item in subnav %}
-      <li>
-          <a class="sidenav__link {% if item["active"] %}sidenav__link--active{% endif %}" href="{{item["href"]}}" title="{{item["label"]}}">
-          {% if "icon" in item %}
-              {{ Icon(item["icon"], classes="sidenav__link-icon") }}
-          {% endif %}
-          <span class="sidenav__link-label">{{item["label"]}}</span>
-          </a>
-      </li>
-      {% endfor %}
-      </ul>
-  {% endif %}
   </li>
 {%- endmacro %}