From d9805495dec02387928550a49a8cd179498ed418 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Mon, 23 Sep 2024 18:58:22 -0700
Subject: [PATCH] adjusting css margin and nav

---
 .../uswds/_uswds-theme-custom-styles.scss     |  4 ++--
 app/main/views/index.py                       | 21 ++++-------------
 app/main/views/sub_navigation_dictionaries.py |  4 ++--
 app/templates/base.html                       | 19 ++++++++++++++-
 app/templates/components/guidance/cards.html  | 23 +++++++++++++++++++
 .../nav_breadcrumb.html}                      |  0
 app/templates/views/roadmap.html              |  2 +-
 7 files changed, 50 insertions(+), 23 deletions(-)
 create mode 100644 app/templates/components/guidance/cards.html
 rename app/templates/components/{guidance_nav_breadcrumb.html => guidance/nav_breadcrumb.html} (100%)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 0ade40a10..4f41a8623 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -672,6 +672,6 @@ details form {
    border-radius: 7px;
 }
 
-#guidance-h1 {
-   margin-top: 0 !important;
+.usa-prose.margin-top-0 {
+   margin-top: 0;
 }
diff --git a/app/main/views/index.py b/app/main/views/index.py
index 007c01f4d..07be634fc 100644
--- a/app/main/views/index.py
+++ b/app/main/views/index.py
@@ -186,7 +186,7 @@ def trial_mode_new():
 @user_is_logged_in
 def guidance():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/guidance.html",
         navigation_links=guidance_nav(),
     )
 
@@ -195,9 +195,8 @@ def guidance():
 @user_is_logged_in
 def clear_goals():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/clear-goals.html",
         navigation_links=guidance_nav(),
-        title="Clear Goals",
     )
 
 
@@ -205,9 +204,8 @@ def clear_goals():
 @user_is_logged_in
 def rules_and_regulations():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/rules-and-regulations.html",
         navigation_links=guidance_nav(),
-        title="Rules and Regulations",
     )
 
 
@@ -215,9 +213,8 @@ def rules_and_regulations():
 @user_is_logged_in
 def establish_trust():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/establish-trust.html",
         navigation_links=guidance_nav(),
-        title="Establish Trust",
     )
 
 
@@ -241,16 +238,6 @@ def multiple_languages():
     )
 
 
-@main.route("/guidance/get-the-word-out")
-@user_is_logged_in
-def get_the_word_out():
-    return render_template(
-        "views/guidance/index.html",
-        navigation_links=guidance_nav(),
-        title="Get the Word Out",
-    )
-
-
 @main.route("/guidance/as-people-receive-text")
 @user_is_logged_in
 def as_people_receive_text():
diff --git a/app/main/views/sub_navigation_dictionaries.py b/app/main/views/sub_navigation_dictionaries.py
index 94ab358ae..d49f415f1 100644
--- a/app/main/views/sub_navigation_dictionaries.py
+++ b/app/main/views/sub_navigation_dictionaries.py
@@ -80,11 +80,11 @@ def guidance_nav():
             "sub_navigation_items": [
                 {
                     "name": "Get the word out",
-                    "link": "main.get_the_word_out",
+                    "link": "main.establish_trust#get-the-word-out",
                 },
                 {
                     "name": "As people receive texts",
-                    "link": "main.as_people_receive_text",
+                    "link": "main.establish_trust#as-people-receive-texts",
                 },
             ],
         },
diff --git a/app/templates/base.html b/app/templates/base.html
index efa6c7408..f78ca0f2e 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -53,7 +53,24 @@
               <div class="grid-row">
                 {% if navigation_links %}
                   <div class="tablet:grid-col-2 margin-bottom-4">
-                    {{ sub_navigation(navigation_links) }}
+                    <nav class="nav">
+                      <ul class="usa-sidenav">
+                        {% for item in navigation_links %}
+                          <li class="usa-sidenav__item">
+                            <a class="{% if item['link'] == request.endpoint %} usa-current {% endif %}" href="{{ url_for(item.link) }}">{{ item.name }}</a>
+                            {% if item.sub_navigation_items %}
+                              <ul class="usa-sidenav__sublist">
+                                {% for sub_item in item.sub_navigation_items %}
+                                  <li>
+                                    <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">{{ sub_item.name }}</a>
+                                  </li>
+                                {% endfor %}
+                              </ul>
+                            {% endif %}
+                          </li>
+                        {% endfor %}
+                      </ul>
+                    </nav>
                   </div>
                   <div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
                 {% else %}
diff --git a/app/templates/components/guidance/cards.html b/app/templates/components/guidance/cards.html
new file mode 100644
index 000000000..ffc3e3f09
--- /dev/null
+++ b/app/templates/components/guidance/cards.html
@@ -0,0 +1,23 @@
+<h3 class="margin-bottom-4">{{card_header}}</h3>
+<ul class="usa-card-group">
+  {% for item in card_contents %}
+  <li class="usa-card grid-col tablet:grid-col-4">
+    <div class="usa-card__container">
+      <div class="usa-card__header">
+        <h4 class="usa-card__heading text-center">{{item.card_heading}}</h4>
+      </div>
+      <div class="usa-card__media usa-card__media--inset">
+        <div class="usa-card__img">
+          <img src="{{item.image_src}}" alt="{{item.card_heading}} image" />
+        </div>
+      </div>
+      <div class="usa-card__body">
+        <p class="text-center">
+          {{item.p_text}}
+        </p>
+      </div>
+    </div>
+  </li>
+  {% endfor %}
+
+</ul>
diff --git a/app/templates/components/guidance_nav_breadcrumb.html b/app/templates/components/guidance/nav_breadcrumb.html
similarity index 100%
rename from app/templates/components/guidance_nav_breadcrumb.html
rename to app/templates/components/guidance/nav_breadcrumb.html
diff --git a/app/templates/views/roadmap.html b/app/templates/views/roadmap.html
index 97f982e12..f9446aad5 100644
--- a/app/templates/views/roadmap.html
+++ b/app/templates/views/roadmap.html
@@ -33,7 +33,7 @@
   <ul class="list list-bullet">
     <li>Achieve compliance to begin piloting, such as ATO and privacy standards.
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-        use xlink:href="/assets/img/sprite.svg#check"></use>
+        <use xlink:href="/assets/img/sprite.svg#check"></use>
       </svg>
     </li>
     <li>Demonstrate that a government-run notifications tool provides a unique value.</li>