From cc16976e2201bbe86b93bee6067dcd587321d408 Mon Sep 17 00:00:00 2001
From: John Skiles Skinner <john.skinner@gsa.gov>
Date: Fri, 19 Jan 2024 16:59:30 -0800
Subject: [PATCH] Highlight current questionnaire step in sidebar

---
 _includes/sidenav.html |  8 ++++----
 pages/disaster-info.md |  6 ++++--
 pages/location.md      | 23 ++++++++++++-----------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/_includes/sidenav.html b/_includes/sidenav.html
index 4970506..5fb53ae 100644
--- a/_includes/sidenav.html
+++ b/_includes/sidenav.html
@@ -10,16 +10,16 @@
         <a href="/">Home</a>
       </li>
       <li class="usa-sidenav__item">
-        <a href="/location/" class="usa-current">Assistance Questionnaire</a>
+        <a href="/location/">Assistance Questionnaire</a>
         <ul class="usa-sidenav__sublist">
           <li class="usa-sidenav__item">
-            <a href="/location/">Location</a>
+            <a id="a-location">Location</a>
           </li>
           <li class="usa-sidenav__item">
-            <a href="/disaster-info/">Disaster info</a>
+            <a id="a-disaster">Disaster info</a>
           </li>
           <li class="usa-sidenav__item">
-            <a href="">Results</a>
+            <a>Results</a>
           </li>
         </ul>
       </li>
diff --git a/pages/disaster-info.md b/pages/disaster-info.md
index c4f6b7d..deb0ff3 100644
--- a/pages/disaster-info.md
+++ b/pages/disaster-info.md
@@ -4,9 +4,7 @@ permalink: /disaster-info/
 layout: layouts/page
 sidenav: true
 ---
-
 <h1 style="font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-weight: normal; color: #005288; width: 400px;">{% image "./_img/disaster-info.png" "illustration" %} <span style="position: relative; bottom: 40px;">Questionnaire</h1>
-
 <h3>Disaster damage</h3>
 
 <label>Primary disaster type</label>
@@ -45,3 +43,7 @@ sidenav: true
   const disasterState = urlParams.get('state')
   document.getElementById("results").action = "{{ '/posts/' | url }}"+disasterState;
 </script>
+
+<style>
+  #a-disaster {background-color: #005288; color: white;}
+</style>
diff --git a/pages/location.md b/pages/location.md
index 164009b..6f0380b 100644
--- a/pages/location.md
+++ b/pages/location.md
@@ -4,19 +4,16 @@ permalink: /location/
 layout: layouts/page
 sidenav: true
 ---
-
 <h1 style="font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-weight: normal; color: #005288; width: 400px;">{% image "./_img/location.png" "illustration" %} <span style="position: relative; bottom: 40px;">Questionnaire</h1>
-
+<h3>Location</h3>
 <form action="{{ '/disaster-info/' | url }}">
-
-<label for="state">What is the primary location of the disaster event?</label>
-<select name="state">
-  <option value="AK">Alaska</option>
-  <option value="AL">Alabama</option>
-  <option value="AR">Arkansas</option>
-  <option value="AS">American Samoa</option>
-  <option value="CA">California</option>
-  
+  <label for="state">What is the primary location of the disaster event?</label>
+  <select name="state">
+    <option value="AK">Alaska</option>
+    <option value="AL">Alabama</option>
+    <option value="AR">Arkansas</option>
+    <option value="AS">American Samoa</option>
+    <option value="CA">California</option>
 </select>
 
 <label>Describe the extent and location of the disaster</label>
@@ -24,3 +21,7 @@ sidenav: true
 
 <button class="usa-button" style="margin: 50px 0 50px 0;">Continue</button>
 </form>
+
+<style>
+  #a-location {background-color: #005288; color: white;}
+</style>