Merge pull request #921 from Eastern-Research-Group/feature/137_updat…

…e-epa-template

Feature/137 update epa template

app/client/public/index.html

@@ -232,6 +232,10 @@
         background-color: inherit;
       }
 
+      .l-header {
+        z-index: 901;
+      }
+
       .exit-disclaimer {
         background-color: #aeb0b5;
         border-radius: 3px;
@@ -891,7 +895,7 @@
               Menu
             </button>
           </div>
-          <div class="l-header__search" id="header-search-drawer">
+          <div class="l-header__search" id="header-search-drawer" hidden="true">
             <form
               class="usa-search usa-search--small usa-search--epa"
               method="get"
@@ -1300,6 +1304,25 @@ <h2>Follow.</h2>
     <script src="%PUBLIC_URL%/epa-template-files/js/once.min.js"></script>
     <script src="%PUBLIC_URL%/epa-template-files/js/common.min.js"></script>
     <script src="%PUBLIC_URL%/epa-template-files/js/scripts.min.js"></script>
+    <!-- EPA template script overrides-->
+    <script>
+      const searchButton = document.querySelector(
+        "[aria-controls='header-search-drawer']",
+      );
+      if (searchButton) {
+        searchButton.addEventListener('click', () => {
+          const expanded = searchButton.ariaExpanded === 'true';
+          searchButton.ariaExpanded = !expanded;
+          const drawer = document.querySelector('#header-search-drawer');
+          if (expanded) {
+            drawer.setAttribute('hidden', true);
+          } else {
+            drawer.removeAttribute('hidden');
+          }
+        });
+      }
+    </script>
+    <!-- End EPA template script overrides-->
 
     <style>
       .menu--main .menu__link,

app/server/app/public/400.html

@@ -506,7 +506,7 @@
               Menu
             </button>
           </div>
-          <div class="l-header__search" id="header-search-drawer">
+          <div class="l-header__search" id="header-search-drawer" hidden="true">
             <form
               class="usa-search usa-search--small usa-search--epa"
               method="get"
@@ -895,6 +895,25 @@ <h2>Follow.</h2>
     <script src="./epa-template-files/js/once.min.js"></script>
     <script src="./epa-template-files/js/common.min.js"></script>
     <script src="./epa-template-files/js/scripts.min.js"></script>
+    <!-- EPA template script overrides-->
+    <script>
+      const searchButton = document.querySelector(
+        "[aria-controls='header-search-drawer']",
+      );
+      if (searchButton) {
+        searchButton.addEventListener('click', () => {
+          const expanded = searchButton.ariaExpanded === 'true';
+          searchButton.ariaExpanded = !expanded;
+          const drawer = document.querySelector('#header-search-drawer');
+          if (expanded) {
+            drawer.setAttribute('hidden', true);
+          } else {
+            drawer.removeAttribute('hidden');
+          }
+        });
+      }
+    </script>
+    <!-- End EPA template script overrides-->
 
     <style>
       .menu--main .menu__link,

app/server/app/public/500.html

@@ -506,7 +506,7 @@
               Menu
             </button>
           </div>
-          <div class="l-header__search" id="header-search-drawer">
+          <div class="l-header__search" id="header-search-drawer" hidden="true">
             <form
               class="usa-search usa-search--small usa-search--epa"
               method="get"
@@ -901,6 +901,25 @@ <h2>Follow.</h2>
     <script src="./epa-template-files/js/once.min.js"></script>
     <script src="./epa-template-files/js/common.min.js"></script>
     <script src="./epa-template-files/js/scripts.min.js"></script>
+    <!-- EPA template script overrides-->
+    <script>
+      const searchButton = document.querySelector(
+        "[aria-controls='header-search-drawer']",
+      );
+      if (searchButton) {
+        searchButton.addEventListener('click', () => {
+          const expanded = searchButton.ariaExpanded === 'true';
+          searchButton.ariaExpanded = !expanded;
+          const drawer = document.querySelector('#header-search-drawer');
+          if (expanded) {
+            drawer.setAttribute('hidden', true);
+          } else {
+            drawer.removeAttribute('hidden');
+          }
+        });
+      }
+    </script>
+    <!-- End EPA template script overrides-->
 
     <style>
       .menu--main .menu__link,