refactor code

Author: hmillersarah

web-components/nav-header/nav-header.css

@@ -242,17 +242,17 @@ input {
   .logo h4 {
     font-size: 1em;
   }
+
+  form input {
+    font-size: 1em;
+  }
 }
 
 /* 1023px and below screen sizes */
 @media screen and (max-width: 63.9375em) {
   #search-input {
     display: none;
   }
-
-  /* form input {
-    font-size: 1em;
-  } */
 }
 
 /* 1024px and above screen sizes */

web-components/nav-header/nav-header.js

@@ -83,37 +83,23 @@ function createComponent(html) {
       // Event listeners for search
       // --------------------------------------------------------------------------------------------------
 
+      // Toggle open search bar (small screens)
       searchIcon.addEventListener("click", () => {
         if (window.innerWidth <= 1023) {
           if (siteHeader.style.display === "block") {
-            siteHeader.style.display = "none";
-            searchInput.style.display = "block";
-            navigation.classList.add("search-bar-open");
-            searchForm.classList.add("search-bar-open");
-            searchBar.classList.add("search-bar-open");
+            openSearchBar();
           } else {
-            siteHeader.style.display = "block";
-            searchInput.style.display = "none";
-            navigation.classList.remove("search-bar-open");
-            searchForm.classList.remove("search-bar-open");
-            searchBar.classList.remove("search-bar-open");
+            closeSearchBar("block", "none");
           }
         }
       });
 
+      // Toggle open search bar (on screen resize)
       window.addEventListener("resize", () => {
         if (window.innerWidth >= 1024) {
-          siteHeader.style.display = "block";
-          searchInput.style.display = "block";
-          navigation.classList.remove("search-bar-open");
-          searchForm.classList.remove("search-bar-open");
-          searchBar.classList.remove("search-bar-open");
+          closeSearchBar("block", "block");
         } else {
-          siteHeader.style.display = "block";
-          searchInput.style.display = "none";
-          navigation.classList.remove("search-bar-open");
-          searchForm.classList.remove("search-bar-open");
-          searchBar.classList.remove("search-bar-open");
+          closeSearchBar("block", "none");
         }
       });
 
@@ -218,6 +204,23 @@ function createComponent(html) {
         arrow.classList.toggle("rotArrow");
         desc.classList.toggle("search_content_drop");
       }
+
+      // Open search bar
+      function openSearchBar() {
+        siteHeader.style.display = "none";
+        searchInput.style.display = "block";
+        navigation.classList.add("search-bar-open");
+        searchForm.classList.add("search-bar-open");
+        searchBar.classList.add("search-bar-open");
+      }
+
+      function closeSearchBar(headerState, inputState) {
+        siteHeader.style.display = headerState;
+        searchInput.style.display = inputState;
+        navigation.classList.remove("search-bar-open");
+        searchForm.classList.remove("search-bar-open");
+        searchBar.classList.remove("search-bar-open");
+      }
     }
   }