From d8e9aaee0ff2167a51d19d887d42d018e10adfcb Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Tue, 26 Mar 2024 18:00:01 -0700
Subject: [PATCH] updated header nav and seperated out usabanner

---
 app/templates/new/base.html                  |   7 +-
 app/templates/new/components/header.html     | 157 +++----------------
 app/templates/new/components/usa_banner.html |  44 ++++++
 3 files changed, 66 insertions(+), 142 deletions(-)
 create mode 100644 app/templates/new/components/usa_banner.html

diff --git a/app/templates/new/base.html b/app/templates/new/base.html
index f7aa58f68..4d5279342 100644
--- a/app/templates/new/base.html
+++ b/app/templates/new/base.html
@@ -1,6 +1,5 @@
 {% from "../components/banner.html" import banner %}
 {% from "../components/components/skip-link/macro.njk" import usaSkipLink -%}
-{% from "../components/components/header/macro.njk" import usaHeader -%}
 {% from "../components/components/footer/macro.njk" import usaFooter -%}
 
 
@@ -25,13 +24,13 @@
       }) }}
     {% endblock %}
 
-    <!-- #region header -->
+    {# region header #}
     {% block header %}
       {% if current_user.is_authenticated %}
-        {% include "new/components/header.html" %}
+        {% include 'new/components/usa_banner.html' %}
+        {% include 'new/components/header.html' %}
       {% endif %}
     {% endblock %}
-    <!-- #endregion -->
 
     <!-- \\#region block main -->
     {% block main %}
diff --git a/app/templates/new/components/header.html b/app/templates/new/components/header.html
index 1f559f447..e21963fed 100644
--- a/app/templates/new/components/header.html
+++ b/app/templates/new/components/header.html
@@ -1,145 +1,26 @@
+{# setting navigation and secondarynavigation #}
+{% set navigation = [
+  {"href": url_for("main.show_accounts_or_dashboard"), "text": "Current service", "active": header_navigation.is_selected('accounts-or-dashboard')},
+  {"href": url_for('main.get_started'), "text": "Using Notify", "active": header_navigation.is_selected('using_notify')},
+  {"href": url_for('main.features'), "text": "Features", "active": header_navigation.is_selected('features')},
+  {"href": url_for('main.support'), "text": "Contact us", "active": header_navigation.is_selected('support')}
+] %}
 
-<!-- usa banner -->
-<section class="usa-banner site-banner" aria-label="Official website of the United States government,,,,,,">
-  <div class="usa-accordion">
-    <header class="usa-banner__header">
-      <div class="usa-banner__inner">
-        <div class="grid-col-auto">
-          <img aria-hidden="true" class="usa-banner__header-flag" src="/static/img/us_flag_small.png" alt="" />
-        </div>
-        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
-          <p class="usa-banner__header-text">An official website of the United States government</p>
-          <p class="usa-banner__header-action">Here’s how you know</p>
-        </div>
-        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
-          <span class="usa-banner__button-text">Here’s how you know</span>
-        </button>
-      </div>
-    </header>
-    <div class="usa-banner__content usa-accordion__content" id="gov-banner" hidden="">
-      <div class="grid-row grid-gap-lg">
-        <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
-          <div class="usa-media-block__body">
-            <p>
-              <strong>Official websites use .gov</strong>
-              <br>
-              A <strong>.gov</strong> website belongs to an official government organization in the United States.
-            </p>
-          </div>
-        </div>
-        <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-https.svg" role="img" alt="" aria-hidden="true">
-          <div class="usa-media-block__body">
-            <p>
-              <strong>Secure .gov websites use HTTPS</strong>
-              <br>
-              A <strong>lock</strong> ( <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">Locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"></path></svg></span> ) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
 {% if current_user.platform_admin %}
-  {% set navigation = [
-    {
-      "href": url_for("main.show_accounts_or_dashboard"),
-      "text": "Current service",
-      "active": header_navigation.is_selected('accounts-or-dashboard')
-    },
-    {
-      "href": url_for('main.get_started'),
-      "text": "Using Notify",
-      "active": header_navigation.is_selected('using_notify')
-    },
-    {
-      "href": url_for('main.features'),
-      "text": "Features",
-      "active": header_navigation.is_selected('features')
-    },
-    {
-      "href": url_for('main.platform_admin_splash_page'),
-      "text": "Platform admin",
-      "active": header_navigation.is_selected('platform-admin')
-    },
-    {
-      "href": url_for('main.support'),
-      "text": "Contact us",
-      "active": header_navigation.is_selected('support')
-    }
-  ] %}
-  {% if current_service %}
-    {% set secondaryNavigation = [
-      {
-        "href": url_for('main.service_settings', service_id=current_service.id),
-        "text": "Settings",
-        "active": secondary_navigation.is_selected('settings')
-      },
-      {
-        "href": url_for('main.sign_out'),
-        "text": "Sign out"
-      }
-  ] %}
-  {% else %}
-    {% set secondaryNavigation = [
-      {
-        "href": url_for('main.sign_out'),
-        "text": "Sign out"
-      }
-    ] %}
-  {% endif %}
+  {% set navigation = navigation + [{"href": url_for('main.platform_admin_splash_page'), "text": "Platform admin", "active": header_navigation.is_selected('platform-admin')}] %}
 {% else %}
-  {% set navigation = [
-    {
-      "href": url_for("main.show_accounts_or_dashboard"),
-      "text": "Current service",
-      "active": header_navigation.is_selected('accounts-or-dashboard')
-    },
-    {
-      "href": url_for('main.get_started'),
-      "text": "Using Notify",
-      "active": header_navigation.is_selected('using_notify')
-    },
-    {
-      "href": url_for('main.features'),
-      "text": "Features",
-      "active": header_navigation.is_selected('features')
-    },
-    {
-      "href": url_for('main.support'),
-      "text": "Contact us",
-      "active": header_navigation.is_selected('support')
-    },
-    {
-      "href": url_for('main.user_profile'),
-      "text": "User profile",
-      "active": header_navigation.is_selected('user-profile')
-    }
-  ] %}
-  {% if current_service %}
-    {% set secondaryNavigation = [
-      {
-        "href": url_for('main.service_settings', service_id=current_service.id),
-        "text": "Settings",
-        "active": secondary_navigation.is_selected('settings')
-      },
-      {
-        "href": url_for('main.sign_out'),
-        "text": "Sign out"
-      }
-    ] %}
-  {% else %}
-    {% set secondaryNavigation = [
-      {
-      "href": url_for('main.sign_out'),
-      "text": "Sign out"
-      }
-    ] %}
-  {% endif %}
+  {% set navigation = navigation + [{"href": url_for('main.user_profile'), "text": "User profile", "active": header_navigation.is_selected('user-profile')}] %}
 {% endif %}
-<!-- usa header -->
+
+{% if current_service %}
+  {% set secondaryNavigation = [
+      {"href": url_for('main.service_settings', service_id=current_service.id), "text": "Settings", "active": secondary_navigation.is_selected('settings')},
+      {"href": url_for('main.sign_out'), "text": "Sign out"}
+  ] %}
+{% else %}
+  {% set secondaryNavigation = [{"href": url_for('main.sign_out'), "text": "Sign out"}] %}
+{% endif %}
+{# usa header #}
 <header class="usa-header usa-header--extended">
   <div class="usa-nav-container">
     <div class="usa-navbar">
diff --git a/app/templates/new/components/usa_banner.html b/app/templates/new/components/usa_banner.html
new file mode 100644
index 000000000..532a2937a
--- /dev/null
+++ b/app/templates/new/components/usa_banner.html
@@ -0,0 +1,44 @@
+
+{# usa banner #}
+<section class="usa-banner site-banner" aria-label="Official website of the United States government,,,,,,">
+  <div class="usa-accordion">
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img aria-hidden="true" class="usa-banner__header-flag" src="/static/img/us_flag_small.png" alt="" />
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
+          <p class="usa-banner__header-text">An official website of the United States government</p>
+          <p class="usa-banner__header-action">Here’s how you know</p>
+        </div>
+        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
+          <span class="usa-banner__button-text">Here’s how you know</span>
+        </button>
+      </div>
+    </header>
+    <div class="usa-banner__content usa-accordion__content" id="gov-banner" hidden="">
+      <div class="grid-row grid-gap-lg">
+        <div class="usa-banner__guidance tablet:grid-col-6">
+          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Official websites use .gov</strong>
+              <br>
+              A <strong>.gov</strong> website belongs to an official government organization in the United States.
+            </p>
+          </div>
+        </div>
+        <div class="usa-banner__guidance tablet:grid-col-6">
+          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-https.svg" role="img" alt="" aria-hidden="true">
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Secure .gov websites use HTTPS</strong>
+              <br>
+              A <strong>lock</strong> ( <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">Locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"></path></svg></span> ) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>