From 0275540e44be9d55fa4903582d30170e3eb8c9f0 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 28 Aug 2025 13:03:04 -0700
Subject: [PATCH 1/4] Coveo: Add mobile support

---
 assets/css/v2/style.css      | 40 ++++++++++++++++++++++++++++++++++--
 assets/js/coveo.js           | 17 +++++++++++++++
 layouts/_default/baseof.html |  1 +
 layouts/partials/header.html |  6 +++++-
 4 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index b6626dfb..40f0b24f 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -410,7 +410,7 @@ ol li:last-child {
 .grid-container {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: var(--header-height) 1fr auto;
+  grid-template-rows: auto 1fr auto;
   grid-template-areas:
     "sidebar header"
     "sidebar content"
@@ -533,6 +533,11 @@ ol li:last-child {
       height: 2.5rem;
     }
 
+    .header__search--mobile--search--button {
+      cursor: pointer;
+      display: none;
+    }
+
     .header__search {
       display: block;
       width: auto;
@@ -638,6 +643,31 @@ ol li:last-child {
   border-top: 1px solid oklch(var(--color-divider));
 }
 
+/* Coveo toggling */
+#search-standalone-header-panel:checked ~ .grid-container {
+  & :has([data-mode="mobile"]) {
+    .header__search[data-mode="mobile"] {
+      position: absolute;
+      top: 100%;
+      width: 100%;
+      padding-top: 0;
+
+      #search-standalone-header {
+        display: unset;
+
+        atomic-search-box {
+          width: calc(100% + 2rem);
+          margin-left: -1rem;
+        }
+      }
+    }
+
+    .header + * {
+      margin-top: 2rem;
+    }
+  }
+}
+
 /* sidebar toggling */
 #sidebar-panel:checked ~ .grid-container {
   grid-template-columns: 1fr;
@@ -899,8 +929,14 @@ ol li:last-child {
       }
     }
     .header-container {
+      .header__search--mobile--search--button {
+        display: block;
+      }
+
       .header__search {
-        display: none;
+        #search-standalone-header {
+          display: none;
+        }
       }
     }
   }
diff --git a/assets/js/coveo.js b/assets/js/coveo.js
index 261ef70a..5616c5e7 100644
--- a/assets/js/coveo.js
+++ b/assets/js/coveo.js
@@ -103,3 +103,20 @@ async function atomicCoveo() {
 document.addEventListener('DOMContentLoaded', async () => {
   atomicCoveo();
 });
+
+window.addEventListener('resize', () => {
+  const MODES = [
+    // my really bad enum
+    'desktop',
+    'mobile',
+  ];
+  const search = document.getElementById('header__search');
+
+  if (search) {
+    if (window.innerWidth < 68 * 16) {
+      search.setAttribute('data-mode', MODES[1]);
+    } else {
+      search.setAttribute('data-mode', MODES[0]);
+    }
+  }
+});
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f5625a9e..4eabd547 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -41,6 +41,7 @@
     {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
     {{ partial "universal-tag.html" . }}
     {{ end }}
+    <input type="checkbox" id="search-standalone-header-panel" class="search-standalone-header-panel" hidden/>
     <input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
     <div class="grid-container">
         <aside class="sidebar">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e48f4e71..a9cca79d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -10,7 +10,11 @@
             </label>
         </div>
         {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-        <div class="header__search">
+        <!-- Mobile button -->
+        <label class="header__search--mobile--search--button" id="header__search--mobile--search--button" for="search-standalone-header-panel">
+          {{ partial "lucide" (dict "context" . "icon" "search") }}
+        </label>
+        <div class="header__search" id="header__search" data-mode="mobile">
             <!-- Standalone search box. -->
             {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
         </div>

From b2701ab35776796e50a2e184573b55e335f7d4c1 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 28 Aug 2025 13:23:57 -0700
Subject: [PATCH 2/4] Coveo: Remove JS solution + small refactor of code

---
 assets/css/v2/style.css | 58 ++++++++++++++++++++---------------------
 assets/js/coveo.js      | 17 ------------
 2 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 40f0b24f..e95dea46 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -643,31 +643,6 @@ ol li:last-child {
   border-top: 1px solid oklch(var(--color-divider));
 }
 
-/* Coveo toggling */
-#search-standalone-header-panel:checked ~ .grid-container {
-  & :has([data-mode="mobile"]) {
-    .header__search[data-mode="mobile"] {
-      position: absolute;
-      top: 100%;
-      width: 100%;
-      padding-top: 0;
-
-      #search-standalone-header {
-        display: unset;
-
-        atomic-search-box {
-          width: calc(100% + 2rem);
-          margin-left: -1rem;
-        }
-      }
-    }
-
-    .header + * {
-      margin-top: 2rem;
-    }
-  }
-}
-
 /* sidebar toggling */
 #sidebar-panel:checked ~ .grid-container {
   grid-template-columns: 1fr;
@@ -841,6 +816,27 @@ ol li:last-child {
 
 /* This is our "mobile" or no sidebar breakpoint */
 @media (max-width: 68rem) {
+  #search-standalone-header-panel:checked ~ .grid-container {
+    .header__search[data-mode="mobile"] {
+      position: absolute;
+      top: 100%;
+      width: 100%;
+      padding-top: 0;
+
+      #search-standalone-header {
+        display: unset;
+
+        atomic-search-box {
+          width: calc(100% + 2rem);
+          margin-left: -1rem;
+        }
+      }
+    }
+
+    .header + * {
+      margin-top: 2rem;
+    }
+  }
   #sidebar-panel:not(:checked) ~ .grid-container {
     .header {
       .header__control--sidebar--close {
@@ -913,6 +909,14 @@ ol li:last-child {
     }
   }
 
+  .grid-container:has(.homepage) {
+    .header {
+      .header__search--mobile--search--button {
+        display: block;
+      }
+    }
+  }
+
   .header {
     .product-selector {
       display: none;
@@ -929,10 +933,6 @@ ol li:last-child {
       }
     }
     .header-container {
-      .header__search--mobile--search--button {
-        display: block;
-      }
-
       .header__search {
         #search-standalone-header {
           display: none;
diff --git a/assets/js/coveo.js b/assets/js/coveo.js
index 5616c5e7..261ef70a 100644
--- a/assets/js/coveo.js
+++ b/assets/js/coveo.js
@@ -103,20 +103,3 @@ async function atomicCoveo() {
 document.addEventListener('DOMContentLoaded', async () => {
   atomicCoveo();
 });
-
-window.addEventListener('resize', () => {
-  const MODES = [
-    // my really bad enum
-    'desktop',
-    'mobile',
-  ];
-  const search = document.getElementById('header__search');
-
-  if (search) {
-    if (window.innerWidth < 68 * 16) {
-      search.setAttribute('data-mode', MODES[1]);
-    } else {
-      search.setAttribute('data-mode', MODES[0]);
-    }
-  }
-});

From 84f6a9ba9610efd24d46936a3438ff33ba48cef9 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 28 Aug 2025 13:28:48 -0700
Subject: [PATCH 3/4] Coveo: Remove unneeded data attribute

---
 assets/css/v2/style.css      | 2 +-
 layouts/partials/header.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index e95dea46..0d95a3d2 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -817,7 +817,7 @@ ol li:last-child {
 /* This is our "mobile" or no sidebar breakpoint */
 @media (max-width: 68rem) {
   #search-standalone-header-panel:checked ~ .grid-container {
-    .header__search[data-mode="mobile"] {
+    .header__search {
       position: absolute;
       top: 100%;
       width: 100%;
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index a9cca79d..e962485b 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -11,10 +11,10 @@
         </div>
         {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
         <!-- Mobile button -->
-        <label class="header__search--mobile--search--button" id="header__search--mobile--search--button" for="search-standalone-header-panel">
+        <label class="header__search--mobile--search--button"for="search-standalone-header-panel">
           {{ partial "lucide" (dict "context" . "icon" "search") }}
         </label>
-        <div class="header__search" id="header__search" data-mode="mobile">
+        <div class="header__search">
             <!-- Standalone search box. -->
             {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
         </div>

From b136332a7e222047e90b84ea1de2bac741d57ebf Mon Sep 17 00:00:00 2001
From: Michael McKeen <m.mckeen@f5.com>
Date: Fri, 29 Aug 2025 10:09:32 -0400
Subject: [PATCH 4/4] Header: Tweaks to header search on mobile

---
 assets/css/v2/style.css                   |  81 +++++++++++-----
 exampleSite/hugo.toml                     |   3 +-
 layouts/404.html                          |   2 +-
 layouts/partials/coveo-atomic-search.html |   2 +-
 layouts/partials/header.html              | 112 ++++++++++++----------
 layouts/partials/homepage.html            |   4 +-
 layouts/search/single.html                |   2 +-
 7 files changed, 125 insertions(+), 81 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 0d95a3d2..11cd91b3 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -504,23 +504,71 @@ ol li:last-child {
 .header {
   grid-area: header;
   display: flex;
-  padding: 0 var(--space-s);
   border-bottom: 1px solid oklch(var(--color-divider));
   background: oklch(var(--color-background));
   position: sticky;
   top: 0;
   z-index: 2;
 
+  .header-base {
+    width: 100%;
+    position: relative;
+  }
+
+  .header-search-dropdown {
+    position: absolute;
+    width: 100%;
+    background: white;
+    border-top: 1px solid oklch(var(--color-divider));
+    border-bottom: 1px solid oklch(var(--color-divider));
+    padding: var(--space-m) var(--space-s);
+    align-items: center;
+    display: none;
+
+    atomic-external {
+      width: 100%;
+    }
+
+    atomic-search-box {
+      width: 100%;
+
+      &::part(wrapper) {
+        border-color: oklch(var(--color-codeblock-border));
+      }
+
+      &::part(submit-button-wrapper) {
+        display: none;
+      }
+
+      &::part(textarea) {
+        font-size: var(--atomic-text-base);
+        padding: var(--space-s) var(--space-s);
+        font-weight: 400;
+      }
+
+      &::part(suggestions-wrapper) {
+        border-color: oklch(var(--color-codeblock-border));
+      }
+    }
+  }
+
+  .header-dropdown-mobile {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 8rem;
+  }
+
   .header-container {
     display: flex;
     flex-direction: row;
+    padding: 0 var(--space-s);
     justify-content: space-between;
     flex-wrap: wrap;
     column-gap: 2rem;
     align-items: center;
     width: 100%;
     height: 64px;
-    position: relative;
 
     /* This is fine unless we actually want it to break document flow at super tiny viewports */
     .header__logo {
@@ -600,7 +648,7 @@ ol li:last-child {
         background-color: oklch(var(--color-background));
         border: oklch(var(--color-foreground)) 1px solid;
         box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-        z-index: 1;
+        z-index: 20;
         right: 0;
         display: none;
         width: 400px;
@@ -817,25 +865,11 @@ ol li:last-child {
 /* This is our "mobile" or no sidebar breakpoint */
 @media (max-width: 68rem) {
   #search-standalone-header-panel:checked ~ .grid-container {
-    .header__search {
-      position: absolute;
-      top: 100%;
-      width: 100%;
-      padding-top: 0;
-
-      #search-standalone-header {
-        display: unset;
-
-        atomic-search-box {
-          width: calc(100% + 2rem);
-          margin-left: -1rem;
-        }
+    .header {
+      .header-search-dropdown {
+        display: flex;
       }
     }
-
-    .header + * {
-      margin-top: 2rem;
-    }
   }
   #sidebar-panel:not(:checked) ~ .grid-container {
     .header {
@@ -909,7 +943,7 @@ ol li:last-child {
     }
   }
 
-  .grid-container:has(.homepage) {
+  .grid-container:has(.no-sidebar) {
     .header {
       .header__search--mobile--search--button {
         display: block;
@@ -1372,6 +1406,7 @@ atomic-search-box::part(textarea-expander) {
 atomic-search-box::part(textarea) {
   padding-left: 0;
   padding-right: 0;
+  font-weight: 400;
 }
 
 atomic-search-box::part(wrapper) {
@@ -1395,8 +1430,8 @@ atomic-search-interface#search-standalone-header {
 
   .header-search-box {
     &::part(wrapper) {
+      border-color: oklch(var(--color-codeblock-border));
       border-radius: 0;
-      border-color: oklch(var(--color-foreground));
     }
 
     &::part(textarea) {
@@ -1406,7 +1441,7 @@ atomic-search-interface#search-standalone-header {
 
     &::part(suggestions-wrapper) {
       border-radius: 0;
-      border-color: oklch(var(--color-foreground));
+      border-color: oklch(var(--color-codeblock-border));
       width: calc(100% + 2px);
       margin-inline-start: -1px;
     }
diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml
index 1ff05b37..8bc7b7b0 100644
--- a/exampleSite/hugo.toml
+++ b/exampleSite/hugo.toml
@@ -24,4 +24,5 @@ maxAge = -1
 [params]
   github_repo = "https://github.com/nginxinc/nginx-hugo-theme"
   github_subdir = "exampleSite"
-  enable_last_modified = true
\ No newline at end of file
+  enable_last_modified = true
+  coveo_search_redirect = "/search.html"
\ No newline at end of file
diff --git a/layouts/404.html b/layouts/404.html
index 4fdced6e..209abd72 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,6 +1,6 @@
 {{ define "main"}}
 
-<div class="content">
+<div class="content no-sidebar">
     <div class="not-found-container">
         <h1 class="info-header">
           HTTP 404 - Page not found
diff --git a/layouts/partials/coveo-atomic-search.html b/layouts/partials/coveo-atomic-search.html
index 41692455..c704a89b 100644
--- a/layouts/partials/coveo-atomic-search.html
+++ b/layouts/partials/coveo-atomic-search.html
@@ -1,4 +1,4 @@
-{{ $redirectionUrl := .redirectionUrl | default "/search.html" }}
+{{ $redirectionUrl := .redirectionUrl | default .Site.Params.coveo_search_redirect | default "/search.html" }}
 {{ $id := .id | default "search-standalone-header"}}
 <atomic-search-interface id={{ $id }}>
     <atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e962485b..18f95d68 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,60 +1,68 @@
 {{ define "header" }}
-<div class="header-container">
-    <div class="header__control">
-        <div class="header__control--sidebar">
-            <label class="header__control--sidebar--close" for="sidebar-panel">
-            {{ partial "lucide" (dict "context" . "icon" "panel-left-close") }}
-            </label>
-            <label class="header__control--sidebar--open" for="sidebar-panel">
-            {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
-            </label>
-        </div>
-        {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-        <!-- Mobile button -->
-        <label class="header__search--mobile--search--button"for="search-standalone-header-panel">
-          {{ partial "lucide" (dict "context" . "icon" "search") }}
-        </label>
-        <div class="header__search">
-            <!-- Standalone search box. -->
-            {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
-        </div>
-        {{ end }}
-    </div>
+<div class="header-base">
+  <div class="header-container">
+      <div class="header__control">
+          <div class="header__control--sidebar">
+              <label class="header__control--sidebar--close" for="sidebar-panel">
+              {{ partial "lucide" (dict "context" . "icon" "panel-left-close") }}
+              </label>
+              <label class="header__control--sidebar--open" for="sidebar-panel">
+              {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
+              </label>
+          </div>
+          {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
+          <!-- Mobile button -->
+          <label class="header__search--mobile--search--button"for="search-standalone-header-panel">
+            {{ partial "lucide" (dict "context" . "icon" "search") }}
+          </label>
+          <div class="header__search">
+              <!-- Standalone search box. -->
+              {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
+          </div>
+          {{ end }}
+      </div>
 
-    <div class="header__logo">
-        <a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
-            <img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
-        </a>
-    </div>
+      <div class="header__logo">
+          <a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+              <img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
+          </a>
+      </div>
 
-    <div class="header__f5sites">
-    {{ $f5Sites := slice
-      (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
-      (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
-      (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
-    }}
+      <div class="header__f5sites">
+      {{ $f5Sites := slice
+        (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
+        (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
+        (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
+      }}
 
-    <div class="navbar navbar-nav">
-        <div class="nav-item-explore active">
-          <button id="navbar-sites-button" class="button navbar-button dropdown-button" data-testid="header__f5sites_button">
-              F5 Sites
-              <span class="header__f5sites--icon">
-              {{ partial "lucide" (dict "context" . "icon" "chevron-down") }}
-              </span>
-          </button>
-          <div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites_content">
-            <ul>
-              {{ range $f5Sites }}
-                <li>
-                  <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
-                  <p>{{ .description }}</p>
-                </li>
-              {{ end }}
-            </ul>
+      <div class="navbar navbar-nav">
+          <div class="nav-item-explore active">
+            <button id="navbar-sites-button" class="button navbar-button dropdown-button" data-testid="header__f5sites_button">
+                F5 Sites
+                <span class="header__f5sites--icon">
+                {{ partial "lucide" (dict "context" . "icon" "chevron-down") }}
+                </span>
+            </button>
+            <div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites_content">
+              <ul>
+                {{ range $f5Sites }}
+                  <li>
+                    <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
+                    <p>{{ .description }}</p>
+                  </li>
+                {{ end }}
+              </ul>
+            </div>
           </div>
-        </div>
-    </div>
+      </div>
 
-    </div>
+      </div>
+  </div>
+  <div class="header-search-dropdown">
+    <atomic-external selector="#search-standalone-header">
+      {{ $redirectUrl := default .Site.Params.coveo_search_redirect "/search.html" }}
+      <atomic-search-box redirection-url={{ $redirectUrl }}></atomic-search-box>
+    </atomic-external>
+  </div>
 </div>
 {{ end }}
diff --git a/layouts/partials/homepage.html b/layouts/partials/homepage.html
index 52bd5acf..f7e54220 100644
--- a/layouts/partials/homepage.html
+++ b/layouts/partials/homepage.html
@@ -1,5 +1,5 @@
-<div class="homepage">
+<div class="homepage no-sidebar">
   <div class="homepage-section">
     {{ .Content }}
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/search/single.html b/layouts/search/single.html
index 639ac7c7..697223bf 100644
--- a/layouts/search/single.html
+++ b/layouts/search/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<section class="search">
+<section class="search no-sidebar">
   {{ partial "coveo-atomic.html" .}}
 </section>
 {{ end }}