Merge pull request #14285 from canonical/wd-14826

fix: Show search on search icon click on medium and small screens
canonical · Sep 11, 2024 · bf31a09 · bf31a09
2 parents 5201d40 + c3ed5e3
commit bf31a09
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 25 deletions.
diff --git 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
@@ -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%;