From c3ed5e37b52cfb83a867908c7c775b60d1afd427 Mon Sep 17 00:00:00 2001
From: Pete <peterfrench94@gmail.com>
Date: Tue, 10 Sep 2024 21:11:40 +0200
Subject: [PATCH] fix: Show search on search icon click on medium and small
 screens

---
 static/js/src/navigation.js          | 10 ----------
 static/sass/_pattern_navigation.scss | 22 +++++++---------------
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/static/js/src/navigation.js b/static/js/src/navigation.js
index ea1e8ea05fb..e9f721a1565 100644
--- a/static/js/src/navigation.js
+++ b/static/js/src/navigation.js
@@ -711,11 +711,7 @@ function openSearch(e) {
   Array.from(searchButtons).forEach((searchButton) => {
     searchButton.setAttribute("aria-pressed", true);
   });
-
   addClassesToElements([navigation], ["has-search-open"]);
-  if (secondaryNav) {
-    addClassesToElements([secondaryNav], ["u-hide"]);
-  }
   searchInput.focus();
   document.addEventListener("keyup", escKeyPressHandler);
 }
@@ -724,13 +720,7 @@ function closeSearch() {
   searchButtons.forEach((searchButton) => {
     searchButton.removeAttribute("aria-pressed");
   });
-
   navigation.classList.remove("has-search-open");
-
-  if (secondaryNav) {
-    secondaryNav.classList.remove("u-hide");
-  }
-
   document.removeEventListener("keyup", escKeyPressHandler);
 }
 
diff --git a/static/sass/_pattern_navigation.scss b/static/sass/_pattern_navigation.scss
index a36bb4afcc4..d030d361376 100644
--- a/static/sass/_pattern_navigation.scss
+++ b/static/sass/_pattern_navigation.scss
@@ -60,6 +60,12 @@ $meganav-height: 3rem;
       font-weight: 400;
     }
 
+    &.has-search-open .p-navigation__search {
+      @media (max-width: $breakpoint-navigation-threshold - 1) {
+        position: fixed;
+      }
+    }
+
     .p-navigation__row--25-75 {
       @media (min-width: $breakpoint-navigation-threshold - 1) {
         .p-navigation__items:first-child {
@@ -357,19 +363,6 @@ $meganav-height: 3rem;
           margin-left: auto;
         }
       }
-
-      .p-search-box__input {
-        background-color: $color-light !important;
-
-        &:focus,
-        &:hover {
-          background-color: $color-light !important;
-        }
-      }
-
-      .p-search-box__input::placeholder {
-        color: #000;
-      }
     }
 
     .p-navigation__banner {
@@ -419,11 +412,10 @@ $meganav-height: 3rem;
 
       .p-navigation__search {
         align-items: center;
-        background-color: #262626;
         display: flex;
         justify-content: center;
         left: 0;
-        padding: 1rem;
+        padding: 0.6rem 5rem 0.6rem 0;
         position: absolute;
         top: 2rem;
         width: 100%;