Merge pull request #458 from cisagov/jon/451

Add checkmark to the sidenav

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -131,6 +131,16 @@ a.breadcrumb__back {
   }
 }
 
+.usa-sidenav {
+  .usa-sidenav__item {
+    span {
+      a.link_usa-checked {
+        padding: 0;
+      }
+    }    
+  }
+}
+
 .sidenav__step--locked {
   color: color('base-darker');
   span {
@@ -146,6 +156,7 @@ a.breadcrumb__back {
   }
 }
 
+
 .stepnav {
   margin-top: units(2);
 }

src/registrar/templates/application_sidebar.html

@@ -5,11 +5,23 @@
     <ul class="usa-sidenav">
     {% for this_step in steps.all %}
       {% if this_step in visited %}
-      <li class="usa-sidenav__item">
+      <li class="usa-sidenav__item sidenav__step--locked">
+        <span>
+          {% if not this_step == steps.current %}
+          <svg class="usa-icon text-green" aria-hidden="true" focsuable="false" role="img" width="24" height="24">
+            <title id="checked-step__{{forloop.counter}}">Checked mark</title>
+            <use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
+          </svg>
+          {% endif %}
         <a href="{% namespaced_url 'application' this_step %}" 
-           {% if this_step == steps.current %}class="usa-current"{% endif%}>
+           {% if this_step == steps.current %}
+           class="usa-current"
+           {% else %}
+           class="link_usa-checked"
+           {% endif%}>
           {{ form_titles|get_item:this_step }}
         </a>
+      </span>
       {% else %}
         <li class="usa-sidenav__item sidenav__step--locked">
           <span>