From fefd62fbea7072a5859f3bdd81e84734e4856e5b Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:02:16 +0100
Subject: [PATCH 01/11] Headers: Add border to breadcrumb for mobile

---
 assets/css/v2/style.css      | 77 ++++++++++++++++++++++++++----------
 layouts/partials/header.html |  8 +++-
 2 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index df120970..e48dabc8 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -251,10 +251,11 @@ textarea:not([rows]) {
 
   /* TODO: This aligns the logo in the header perfectly with the one in the sidebar, but
  this is not a safe way to do it, and likely to get out of sync */
-  --header-height: 93px;
+  --header-height: 6rem;
 
   --sidebar-width: 22rem;
-  --sidebar-item-padding: 0.25rem 0.75rem;
+  --sidebar-item-padding-lr: 0.75rem;
+  --sidebar-item-padding-tb: 0.25rem;
   --content-max-width: 88rem;
 
   --main-col: minmax(34rem, 50rem);
@@ -352,14 +353,35 @@ ol li:last-child {
   @media (max-width: 68rem) {
     grid-template-columns: 1fr;
     grid-template-areas:
-      "header"
-      "content"
-      "footer";
+      "sidebar header"
+      "sidebar content"
+      "sidebar footer";
+
+    .text-content {
+      margin-top: 1rem;
+    }
+
+    .content-layout .breadcrumb-layout {
+      position: sticky;
+      top: 0;
+      z-index: 3;
+
+      border-bottom: 1px solid oklch(var(--color-divider));
+      align-items: center;
+      padding: var(--space-xs) 0;
+    }
+  }
+  .content {
+    padding: 0 var(--space-s) 2rem;
   }
 
   .header__logo {
     display: none;
   }
+
+  .header__logo-small {
+    display: none;
+  }
 }
 
 /* Homepage specific layout */
@@ -404,6 +426,7 @@ ol li:last-child {
   grid-area: header;
   display: flex;
   padding: 0 var(--space-s);
+  border-bottom: 1px solid oklch(var(--color-divider));
 
   .header-container {
     display: flex;
@@ -515,19 +538,21 @@ ol li:last-child {
   background: oklch(var(--color-background));
   box-sizing: border-box;
   transform: translateX(0);
-  padding: var(--space-s) 0 var(--space-s) var(--space-s);
+  padding: 0 0 var(--space-s) var(--space-s);
 
   .sidebar__container {
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: var(--header-height) 1fr;
     height: 100%;
 
     .sidebar__header {
+      display: flex;
+      align-items: center;
       position: sticky;
       top: 0;
       background: oklch(var(--color-background));
       z-index: 1;
-      padding: var(--sidebar-item-padding);
+      padding: 0 0 0 var(--sidebar-item-padding-lr);
 
       .sidebar__img {
         height: 2rem;
@@ -545,6 +570,19 @@ ol li:last-child {
 }
 
 @media (max-width: 68rem) {
+  .header {
+    .header__logo-small {
+      display: unset;
+      img {
+        margin: 0;
+      }
+    }
+  }
+
+  .header__product-selector {
+    display: none;
+  }
+
   .sidebar {
     grid-area: sidebar;
     position: absolute;
@@ -760,13 +798,11 @@ nav {
   width: 100%;
 }
 
-@media (max-width: 88rem) {
-  .content-layout .breadcrumb-layout {
-    position: sticky;
-    top: 0;
-    z-index: 3;
-  }
+main {
+  margin: 0 var(--space-s) var(--space-s) var(--space-s);
+}
 
+@media (max-width: 88rem) {
   body:has(.sidebar__mobile-open) {
     /* Disable scrolling in main content + hide footer if the sidebar is visible */
     overflow-y: hidden;
@@ -840,13 +876,13 @@ nav {
       }
     }
   }
-
-  main {
-    margin: 0 2rem 2rem 2rem;
-  }
 }
 
 @media (min-width: 88em) {
+  .header__logo {
+    display: unset;
+  }
+
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
     grid-template-rows: 3rem max-content;
@@ -1097,7 +1133,7 @@ nav.sidebar.sidebar__mobile-open {
   }
 
   .sidebar__container button {
-    padding: var(--sidebar-item-padding);
+    padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
     justify-content: space-between;
   }
 
@@ -1159,7 +1195,7 @@ nav.sidebar.sidebar__mobile-open {
 
   .sidebar__link {
     display: block;
-    padding: var(--sidebar-item-padding);
+    padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
     margin: 2px 0 2px 0;
     border-radius: 5px 0 0 5px;
     color: oklch(0 0 0 / 0.75);
@@ -1904,7 +1940,6 @@ figure {
 
 img,
 .figure-bitmap {
-  margin-bottom: 0.625rem;
   display: inline-block;
   width: auto;
   max-width: 100%;
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index efb40115..9966ebc3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -7,6 +7,12 @@
         </a>
     </div>
 
+    <div class="header__logo-small">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="header__img" src="{{ "/images/icons/NGINX-product-icon.svg" | absURL }}" alt="NGINX Docs">
+        </a>
+    </div>
+
     <div class="header__product-selector">
         {{ $nginxProducts := slice
             (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
@@ -64,8 +70,6 @@
                 </div>
             {{ end }}
         </div>
-
-
     </div>
 
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}

From c852b71956b33a8cc576a932581136018e0367cd Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:10:58 +0100
Subject: [PATCH 02/11] Headers: Set spacing to around

---
 assets/css/v2/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index e48dabc8..3dbc786b 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -361,7 +361,7 @@ ol li:last-child {
       margin-top: 1rem;
     }
 
-    .content-layout .breadcrumb-layout {
+    .breadcrumb-layout {
       position: sticky;
       top: 0;
       z-index: 3;
@@ -431,7 +431,7 @@ ol li:last-child {
   .header-container {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
     width: 100%;
 

From 4e1a2f160276ed886893bd675211f38b52ed40fe Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 30 Jun 2025 14:35:01 +0100
Subject: [PATCH 03/11] Sidebar: Add initial collapsible sidebar

---
 assets/css/v2/style.css          | 145 +++++++++++++------------------
 layouts/_default/baseof.html     |   1 +
 layouts/partials/header.html     |   5 ++
 layouts/partials/sidebar-v2.html |  13 ++-
 4 files changed, 75 insertions(+), 89 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 3dbc786b..3b322f03 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -392,15 +392,14 @@ ol li:last-child {
     "content"
     "footer";
 
-  .sidebar {
-    display: none;
-  }
-
   .header__logo {
     display: unset;
   }
 
-  .header__product-selector {
+  .sidebar,
+  .header__product-selector,
+  .header__sidebar__panel,
+  .header__logo-small {
     display: none;
   }
 }
@@ -525,7 +524,43 @@ ol li:last-child {
   margin-top: auto;
 }
 
+/* sidebar toggling */
+#sidebar-panel:checked ~ .grid-container {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+
+  .sidebar {
+    display: none;
+  }
+
+  .header__sidebar__panel {
+    display: flex;
+    align-self: center;
+  }
+}
+
 /* sidebar layout */
+
+.header__sidebar__panel,
+.sidebar__panel {
+  cursor: pointer;
+  color: var(--color-foreground);
+  label {
+    cursor: pointer;
+  }
+
+  :hover {
+    color: oklch(var(--color-brand));
+  }
+}
+
+.header__sidebar__panel {
+  display: none;
+}
+
 .sidebar {
   grid-area: sidebar;
   position: fixed;
@@ -548,11 +583,12 @@ ol li:last-child {
     .sidebar__header {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       position: sticky;
       top: 0;
       background: oklch(var(--color-background));
       z-index: 1;
-      padding: 0 0 0 var(--sidebar-item-padding-lr);
+      padding: 0 2.25rem 0 var(--sidebar-item-padding-lr);
 
       .sidebar__img {
         height: 2rem;
@@ -569,7 +605,19 @@ ol li:last-child {
   }
 }
 
+/* This is our "mobile" or no sidebar breakpoint */
 @media (max-width: 68rem) {
+  #sidebar-panel:checked ~ .grid-container {
+    .sidebar {
+      /* Above search */
+      z-index: 11;
+      display: unset;
+      transform: translateX(0);
+      border-bottom: 1px solid oklch(var(--color-divider));
+      height: fit-content;
+    }
+  }
+
   .header {
     .header__logo-small {
       display: unset;
@@ -583,6 +631,11 @@ ol li:last-child {
     display: none;
   }
 
+  .header__sidebar__panel {
+    display: flex;
+    align-items: center;
+  }
+
   .sidebar {
     grid-area: sidebar;
     position: absolute;
@@ -593,10 +646,6 @@ ol li:last-child {
     transform: translateX(-100%);
   }
 
-  #sidebar-toggle:checked ~ .sidebar {
-    transform: translateX(0);
-  }
-
   .sidebar-button {
     display: block;
     margin-bottom: 1rem;
@@ -802,82 +851,6 @@ main {
   margin: 0 var(--space-s) var(--space-s) var(--space-s);
 }
 
-@media (max-width: 88rem) {
-  body:has(.sidebar__mobile-open) {
-    /* Disable scrolling in main content + hide footer if the sidebar is visible */
-    overflow-y: hidden;
-
-    .sidebar-layout {
-      position: absolute;
-      height: 100%;
-    }
-
-    footer {
-      display: none;
-    }
-
-    .sidebar-layout .sidebar__mobile__toggle {
-      display: flex;
-      align-items: center;
-      position: sticky;
-      top: 1rem;
-      margin-top: 2rem;
-      margin-left: 2rem;
-      margin-right: 2rem;
-      padding: 0.5rem;
-      color: white;
-      background-color: oklch(var(--color-brand));
-    }
-  }
-
-  .sidebar__mobile__toggle {
-    background-color: transparent;
-    border: none;
-
-    .lucide {
-      margin-right: 1rem;
-    }
-  }
-
-  .main-layout {
-    /* Mobile support for sidebar */
-    display: flex;
-    flex-direction: column;
-    position: relative;
-
-    .sidebar-layout {
-      min-height: fit-content;
-      background: white;
-      z-index: 999;
-      width: calc(100% + 4rem);
-      margin-left: -2rem;
-
-      &::before {
-        display: none;
-      }
-
-      nav {
-        width: 100%;
-        display: none;
-        top: var(--sidebar-mobile-top-displacement);
-        max-height: calc(100vh - var(--sidebar-mobile-top-displacement));
-        padding: 0 2rem;
-
-        .sidebar__container {
-          width: 100%;
-        }
-      }
-    }
-
-    .content-layout {
-      .breadcrumb-layout .sidebar__mobile__toggle {
-        display: inline;
-        padding: 0;
-      }
-    }
-  }
-}
-
 @media (min-width: 88em) {
   .header__logo {
     display: unset;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index e00ee014..4046f384 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="sidebar-panel" class="sidebar-panel" hidden/>
     <div class="grid-container">
         <aside class="sidebar">
             {{ partial "sidebar-v2.html" . }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9966ebc3..b4eeba48 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,9 @@
 {{ define "header" }}
+<div class="header__sidebar__panel">
+    <label for="sidebar-panel">
+    {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
+    </label>
+</div>
 <div class="header-container">
 
     <div class="header__logo">
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index fe77a479..be843ae8 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -23,9 +23,16 @@
 
 <div class="sidebar__container">
     <div class="sidebar__header">
-        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
-            <img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
-        </a>
+        <div>
+            <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+                <img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
+            </a>
+        </div>
+        <div class="sidebar__panel">
+            <label for="sidebar-panel">
+            {{ partial "lucide" (dict "context" . "icon" "panel-left-close") }}
+            </label>
+        </div>
     </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>

From 11e93faa2640468062f570de377f2fbb8e8cec96 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Mon, 30 Jun 2025 17:14:39 +0100
Subject: [PATCH 04/11] Header: Sticky and add blur effect

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

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 3b322f03..4ee822fe 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -249,9 +249,7 @@ textarea:not([rows]) {
   --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
   --grid-columns: 12;
 
-  /* TODO: This aligns the logo in the header perfectly with the one in the sidebar, but
- this is not a safe way to do it, and likely to get out of sync */
-  --header-height: 6rem;
+  --header-height: 4rem;
 
   --sidebar-width: 22rem;
   --sidebar-item-padding-lr: 0.75rem;
@@ -362,10 +360,6 @@ ol li:last-child {
     }
 
     .breadcrumb-layout {
-      position: sticky;
-      top: 0;
-      z-index: 3;
-
       border-bottom: 1px solid oklch(var(--color-divider));
       align-items: center;
       padding: var(--space-xs) 0;
@@ -427,6 +421,13 @@ ol li:last-child {
   padding: 0 var(--space-s);
   border-bottom: 1px solid oklch(var(--color-divider));
 
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
   .header-container {
     display: flex;
     flex-direction: row;
@@ -445,11 +446,17 @@ ol li:last-child {
 
     .header__product-selector {
       width: 10rem;
+      background: rgba(0, 0, 0, 0);
+      color: oklch(var(--color-foreground));
+      text-decoration-color: oklch(var(--color-brand) / 0.3);
+      & :hover {
+        color: oklch(var(--color-brand));
+      }
 
       .product-selector__button {
         display: flex;
         align-items: center;
-        background: oklch(var(--color-background));
+        background: rgba(0, 0, 0, 0);
         border: none;
         width: 16rem;
         font-weight: 500;
@@ -567,7 +574,8 @@ ol li:last-child {
   top: 0;
   left: 0;
   width: var(--sidebar-width);
-  height: 100vh;
+  /* for sticky header, this needs to be calculated to avoid extra whitespace */
+  height: calc(110vh - var(--header-height));
   border-right: 1px solid oklch(var(--color-divider));
   overflow: hidden;
   background: oklch(var(--color-background));
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b4eeba48..09bc3e96 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,21 +1,21 @@
 {{ define "header" }}
-<div class="header__sidebar__panel">
-    <label for="sidebar-panel">
-    {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
-    </label>
-</div>
 <div class="header-container">
 
+    <div class="header__logo-small">
+        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
+            <img class="header__img" src="{{ "/images/icons/NGINX-product-icon.svg" | absURL }}" alt="NGINX Docs">
+        </a>
+    </div>
     <div class="header__logo">
         <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
             <img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
         </a>
     </div>
 
-    <div class="header__logo-small">
-        <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
-            <img class="header__img" src="{{ "/images/icons/NGINX-product-icon.svg" | absURL }}" alt="NGINX Docs">
-        </a>
+    <div class="header__sidebar__panel">
+        <label for="sidebar-panel">
+        {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
+        </label>
     </div>
 
     <div class="header__product-selector">

From a33f8ceb6da64ecdf87b58766ea8a6009c8a7ea5 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 1 Jul 2025 11:01:40 +0100
Subject: [PATCH 05/11] Header: Add f5 logo instead of sites button

---
 assets/css/v2/style.css      | 24 +++++++++++++++---
 assets/js/site-dropdown.js   | 12 ---------
 layouts/partials/header.html | 48 ++++++++++++++++++++++++------------
 3 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 4ee822fe..606512f8 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -150,6 +150,7 @@ textarea:not([rows]) {
   --color-brand-300: 0.84 0.0699 157.51;
   --color-brand-200: 0.91 0.0406 157.72;
   --color-brand-100: 0.98 0.0107 158.85;
+  --color-f5-brand: 0.5839 0.2253 20.56;
   --color-background: 1 0 0;
   --color-foreground: 0 0 0;
   --color-shadow: 0.86 0 0;
@@ -497,13 +498,30 @@ ol li:last-child {
     margin: 0;
   }
 
-  .navbar-button {
-    padding: 0.5rem 0.5rem;
+  .header__f5sites__button {
     border: none;
-    border-radius: 0.25rem;
+    background-color: transparent;
+    border-radius: 0;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
+
+    .header__f5sites__logo {
+      pointer-events: none;
+      height: 2rem;
+
+      svg {
+        height: 2rem;
+        stroke: currentColor;
+        color: black;
+      }
+    }
+
+    &:hover {
+      .header__f5sites__logo svg {
+        color: oklch(var(--color-f5-brand));
+      }
+    }
   }
 
   ul {
diff --git a/assets/js/site-dropdown.js b/assets/js/site-dropdown.js
index 4d9c9ec3..b71e9c3c 100644
--- a/assets/js/site-dropdown.js
+++ b/assets/js/site-dropdown.js
@@ -1,17 +1,12 @@
 document.addEventListener('DOMContentLoaded', () => {
   const dropdownContent = document.getElementById('dropdown-content');
   const navbarButton = document.getElementById('navbar-sites-button');
-  const chevronIcon = document.getElementById('navbar-sites-button-icon');
 
   navbarButton.addEventListener('click', () => {
-    chevronIcon.classList.toggle('rotate-chevron');
-
     if (dropdownContent.style.display === 'block') {
       dropdownContent.style.display = 'none';
-      navbarButton.classList.remove('remove-bottom-radius');
     } else {
       dropdownContent.style.display = 'block';
-      navbarButton.classList.add('remove-bottom-radius');
     }
   });
 
@@ -20,14 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
       !event.target.matches('#navbar-sites-button') &&
       !event.target.matches('#navbar-sites-button-icon')
     ) {
-      if (
-        dropdownContent.style.display !== 'none' &&
-        dropdownContent.style.display !== ''
-      ) {
-        chevronIcon.classList.toggle('rotate-chevron');
-      }
       dropdownContent.style.display = 'none';
-      navbarButton.classList.remove('remove-bottom-radius');
     }
   });
 });
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 09bc3e96..e15d0ed9 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -91,24 +91,40 @@
       (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
     }}
 
-    <ul class="navbar navbar-nav">
-        <li class="nav-item-explore active">
-          <button id="navbar-sites-button" class="button navbar-button">
-              F5 Sites
-              <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
-          </button>
-          <div class="dropdown-content" id="dropdown-content">
-            <ul>
-              {{ range $f5Sites }}
-                <li>
-                  <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
-                  <p>{{ .description }}</p>
-                </li>
-              {{ end }}
-            </ul>
-          </div>
+    <button id="navbar-sites-button" class="header__f5sites__button">
+        <div class="header__f5sites__logo">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+                <title>f5-logo-black</title>
+                <g id="Layer_2" data-name="Layer 2">
+                    <g id="Layer_1-2" data-name="Layer 1">
+                    <g id="f5-logo-rgb">
+                        <g id="Logo-black-and-white">
+                        <path
+                            fill="currentColor"
+                            d="M940.37,894.53a30.85,30.85,0,0,1,9.47,22.94,32.43,32.43,0,0,1-55.4,23.08A32,32,0,0,1,885,917.47a32.54,32.54,0,0,1,32.37-32.57A30.88,30.88,0,0,1,940.37,894.53Zm3.81-3.75a36.65,36.65,0,0,0-26.8-11,37.72,37.72,0,1,0,26.8,64.32,37.71,37.71,0,0,0,0-53.36ZM923,915.65a18.8,18.8,0,0,1-6.93.92h-6.54v-15h6.23c4,0,7,.57,8.77,1.58s2.76,3.07,2.76,6A6.38,6.38,0,0,1,923,915.65Zm-20.75,22.29h7.28V921.66h5.77c3.82,0,6.56.4,8.11,1.36,2.57,1.54,3.88,4.72,3.88,9.48v3.33l.14,1.25a2.91,2.91,0,0,1,.11.5c0,.2.06.27.19.36h6.76l-.24-.48a4.42,4.42,0,0,1-.35-2.11c-.09-1.14-.09-2.15-.09-3.07v-3.07a11.52,11.52,0,0,0-2.26-6.43c-1.54-2.21-3.95-3.51-7.19-4.08a17,17,0,0,0,6-2c2.77-1.75,4.06-4.56,4.06-8.2,0-5.18-2.06-8.73-6.4-10.49-2.39-1-6.14-1.49-11.3-1.49H902.25Z"
+                        />
+                        <path
+                            fill="currentColor"
+                            d="M912.66,217.69c-6.13,25.33-9.34,51.58-15.26,78.43-75-9.73-163.08-16.86-262-20.34-7.94,25.11-15.46,49.69-24.06,76.52,165.55,10.18,246,53.81,293.72,105.22,46.41,52,56.26,109.45,53.58,162.79C952.67,707,914.45,761.79,862,802.41c-53.08,40-117.29,59.84-168.65,64.16C617.56,872.24,516.22,854.2,494.66,841c-13-29.54-25.77-59.3-39.54-91.76-3.35-6.91-5.46-14,4-22.23,14.74-14.13,28.92-27.8,43.84-42.28,6.59-6.44,13.9-12.44,19.44-3.21,20.38,31.43,39.48,60.27,58.61,89,21.73,32.05,54.83,61.26,127.14,56.4,60.79-5.44,107-51.42,111.93-102,5.32-93.6-89.38-160-335.64-181.27C531.7,401,577.75,262.93,614.59,153.2c58.5,2.7,112.65,7.47,164.38,14.15,38.26,4.87,73.81,13.78,109.46,17.9C796.77,72.26,656.88,0,500,0,223.87,0,0,223.86,0,500A497.64,497.64,0,0,0,97.31,796.3c21.18.16,35.86-4.57,37.45-13.7,1.94-9.55.31-24.33-1.36-39.24-10-98.12-13.53-204.06-9.77-310.22-25.36,1.1-48.12,2.24-69.94,3.52.88-19.63,1.94-38.23,3.52-57.59,21.55-2.07,44.38-3.88,69.46-6,1.07-16.91,2.28-33.28,3.74-49.81C141.67,222,248.29,160.08,337.1,136.18c39.41-9.6,63.51-12.63,82.43-13.62,6.84-.22,14.21-.49,21.55-.49,18.41,0,37.09,1.72,48.92,9.76,19.16,14.36,38.09,28.65,58.22,44.54,2,2.72,4.2,7-.8,14.35-9.24,10.81-18.16,21.14-27.55,32.26-5.41,6.57-14.39,4.84-21.95,2.79-15.84-8.11-31.08-15.56-46.54-23.05-28-12.46-57-25.28-89.27-24-20.13,1.61-39.62,22.21-41.64,50.39-2.79,42.88-4.66,86.84-6.24,134.46C370.18,362,426,361,484.85,360.74c0,13.39-.09,25.67-.09,39.39-19.2,8.58-37.3,17.25-56.54,26-39.7.46-77.48.77-115.53,1.43-1.76,113.29-.09,226.16,5,330.51,1,15.75,1.76,31.7,6.29,42.38,5.43,13.44,36.66,23.8,104.6,27.63.27,11.83.6,23,1,34.46-110.63-3.22-216.86-13.81-302-29.13C219.07,935.63,352,1000,500,1000c276.15,0,500-223.87,500-500A497.6,497.6,0,0,0,912.66,217.69Z"
+                        />
+                        <path fill="currentColor" d="M127.51,833.43h0v0Z" />
+                        </g>
+                    </g>
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </button>
+    <div class="dropdown-content" id="dropdown-content">
+    <ul>
+        {{ range $f5Sites }}
+        <li>
+            <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
+            <p>{{ .description }}</p>
         </li>
+        {{ end }}
     </ul>
+    </div>
 
     </div>
 </div>

From 8b8a3eed49068924c189b7427c6be8cf3b1cd83c Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 1 Jul 2025 15:30:54 +0100
Subject: [PATCH 06/11] Header: Fix coveo search breaking page height

---
 assets/css/v2/style.css      |  6 +++++-
 layouts/_default/list.html   |  2 +-
 layouts/_default/single.html |  3 +--
 layouts/partials/header.html | 16 ++++++++--------
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 606512f8..39e83425 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -443,6 +443,9 @@ ol li:last-child {
 
     .header__search {
       width: 14rem;
+      /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
+      transform: translateY(0);
+      overflow: hidden;
     }
 
     .header__product-selector {
@@ -514,6 +517,7 @@ ol li:last-child {
         height: 2rem;
         stroke: currentColor;
         color: black;
+        transition: color 0.2s ease;
       }
     }
 
@@ -1057,7 +1061,7 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   display: none;
   position: absolute;
   top: 0;
-  margin-top: 4em;
+  margin-top: calc(var(--header-height) - 1rem);
   padding: 1rem 1.5rem;
   background-color: oklch(var(--color-background));
   border: oklch(var(--color-foreground)) 1px solid;
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 8980538c..6b7db671 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<main class="content content-has-toc" role="main">
+<main class="content " role="main">
 <section class="main-layout">
     <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c52749c6..0b80cbac 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,7 +3,7 @@
 <main class="content">
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
-    <main role="main">
+
 
     <section class="main-layout">
     <section id="maincontent" class="content-layout">
@@ -34,7 +34,6 @@ <h1>{{ .Title }}</h1>
 
         {{ partial "previous-next-links-in-section-with-title.html" . }}
 
-        </main>
     </section>
     </section>
 </main>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e15d0ed9..30412238 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -116,14 +116,14 @@
         </div>
     </button>
     <div class="dropdown-content" id="dropdown-content">
-    <ul>
-        {{ range $f5Sites }}
-        <li>
-            <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
-            <p>{{ .description }}</p>
-        </li>
-        {{ end }}
-    </ul>
+        <ul>
+            {{ range $f5Sites }}
+            <li>
+                <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
+                <p>{{ .description }}</p>
+            </li>
+            {{ end }}
+        </ul>
     </div>
 
     </div>

From e8c96a43f4281c2b11f3d3ee17e4c55553f07eeb Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Wed, 2 Jul 2025 10:13:08 +0100
Subject: [PATCH 07/11] Revert "Header: Add f5 logo instead of sites button"

This reverts commit a33f8ceb6da64ecdf87b58766ea8a6009c8a7ea5.
---
 assets/css/v2/style.css      | 25 +++--------------
 layouts/partials/header.html | 52 +++++++++++++-----------------------
 2 files changed, 21 insertions(+), 56 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 39e83425..8f2cbb7c 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -150,7 +150,6 @@ textarea:not([rows]) {
   --color-brand-300: 0.84 0.0699 157.51;
   --color-brand-200: 0.91 0.0406 157.72;
   --color-brand-100: 0.98 0.0107 158.85;
-  --color-f5-brand: 0.5839 0.2253 20.56;
   --color-background: 1 0 0;
   --color-foreground: 0 0 0;
   --color-shadow: 0.86 0 0;
@@ -501,31 +500,13 @@ ol li:last-child {
     margin: 0;
   }
 
-  .header__f5sites__button {
+  .navbar-button {
+    padding: 0.5rem 0.5rem;
     border: none;
-    background-color: transparent;
-    border-radius: 0;
+    border-radius: 0.25rem;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
-
-    .header__f5sites__logo {
-      pointer-events: none;
-      height: 2rem;
-
-      svg {
-        height: 2rem;
-        stroke: currentColor;
-        color: black;
-        transition: color 0.2s ease;
-      }
-    }
-
-    &:hover {
-      .header__f5sites__logo svg {
-        color: oklch(var(--color-f5-brand));
-      }
-    }
   }
 
   ul {
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 30412238..09bc3e96 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -91,40 +91,24 @@
       (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
     }}
 
-    <button id="navbar-sites-button" class="header__f5sites__button">
-        <div class="header__f5sites__logo">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
-                <title>f5-logo-black</title>
-                <g id="Layer_2" data-name="Layer 2">
-                    <g id="Layer_1-2" data-name="Layer 1">
-                    <g id="f5-logo-rgb">
-                        <g id="Logo-black-and-white">
-                        <path
-                            fill="currentColor"
-                            d="M940.37,894.53a30.85,30.85,0,0,1,9.47,22.94,32.43,32.43,0,0,1-55.4,23.08A32,32,0,0,1,885,917.47a32.54,32.54,0,0,1,32.37-32.57A30.88,30.88,0,0,1,940.37,894.53Zm3.81-3.75a36.65,36.65,0,0,0-26.8-11,37.72,37.72,0,1,0,26.8,64.32,37.71,37.71,0,0,0,0-53.36ZM923,915.65a18.8,18.8,0,0,1-6.93.92h-6.54v-15h6.23c4,0,7,.57,8.77,1.58s2.76,3.07,2.76,6A6.38,6.38,0,0,1,923,915.65Zm-20.75,22.29h7.28V921.66h5.77c3.82,0,6.56.4,8.11,1.36,2.57,1.54,3.88,4.72,3.88,9.48v3.33l.14,1.25a2.91,2.91,0,0,1,.11.5c0,.2.06.27.19.36h6.76l-.24-.48a4.42,4.42,0,0,1-.35-2.11c-.09-1.14-.09-2.15-.09-3.07v-3.07a11.52,11.52,0,0,0-2.26-6.43c-1.54-2.21-3.95-3.51-7.19-4.08a17,17,0,0,0,6-2c2.77-1.75,4.06-4.56,4.06-8.2,0-5.18-2.06-8.73-6.4-10.49-2.39-1-6.14-1.49-11.3-1.49H902.25Z"
-                        />
-                        <path
-                            fill="currentColor"
-                            d="M912.66,217.69c-6.13,25.33-9.34,51.58-15.26,78.43-75-9.73-163.08-16.86-262-20.34-7.94,25.11-15.46,49.69-24.06,76.52,165.55,10.18,246,53.81,293.72,105.22,46.41,52,56.26,109.45,53.58,162.79C952.67,707,914.45,761.79,862,802.41c-53.08,40-117.29,59.84-168.65,64.16C617.56,872.24,516.22,854.2,494.66,841c-13-29.54-25.77-59.3-39.54-91.76-3.35-6.91-5.46-14,4-22.23,14.74-14.13,28.92-27.8,43.84-42.28,6.59-6.44,13.9-12.44,19.44-3.21,20.38,31.43,39.48,60.27,58.61,89,21.73,32.05,54.83,61.26,127.14,56.4,60.79-5.44,107-51.42,111.93-102,5.32-93.6-89.38-160-335.64-181.27C531.7,401,577.75,262.93,614.59,153.2c58.5,2.7,112.65,7.47,164.38,14.15,38.26,4.87,73.81,13.78,109.46,17.9C796.77,72.26,656.88,0,500,0,223.87,0,0,223.86,0,500A497.64,497.64,0,0,0,97.31,796.3c21.18.16,35.86-4.57,37.45-13.7,1.94-9.55.31-24.33-1.36-39.24-10-98.12-13.53-204.06-9.77-310.22-25.36,1.1-48.12,2.24-69.94,3.52.88-19.63,1.94-38.23,3.52-57.59,21.55-2.07,44.38-3.88,69.46-6,1.07-16.91,2.28-33.28,3.74-49.81C141.67,222,248.29,160.08,337.1,136.18c39.41-9.6,63.51-12.63,82.43-13.62,6.84-.22,14.21-.49,21.55-.49,18.41,0,37.09,1.72,48.92,9.76,19.16,14.36,38.09,28.65,58.22,44.54,2,2.72,4.2,7-.8,14.35-9.24,10.81-18.16,21.14-27.55,32.26-5.41,6.57-14.39,4.84-21.95,2.79-15.84-8.11-31.08-15.56-46.54-23.05-28-12.46-57-25.28-89.27-24-20.13,1.61-39.62,22.21-41.64,50.39-2.79,42.88-4.66,86.84-6.24,134.46C370.18,362,426,361,484.85,360.74c0,13.39-.09,25.67-.09,39.39-19.2,8.58-37.3,17.25-56.54,26-39.7.46-77.48.77-115.53,1.43-1.76,113.29-.09,226.16,5,330.51,1,15.75,1.76,31.7,6.29,42.38,5.43,13.44,36.66,23.8,104.6,27.63.27,11.83.6,23,1,34.46-110.63-3.22-216.86-13.81-302-29.13C219.07,935.63,352,1000,500,1000c276.15,0,500-223.87,500-500A497.6,497.6,0,0,0,912.66,217.69Z"
-                        />
-                        <path fill="currentColor" d="M127.51,833.43h0v0Z" />
-                        </g>
-                    </g>
-                    </g>
-                </g>
-            </svg>
-        </div>
-    </button>
-    <div class="dropdown-content" id="dropdown-content">
-        <ul>
-            {{ range $f5Sites }}
-            <li>
-                <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
-                <p>{{ .description }}</p>
-            </li>
-            {{ end }}
-        </ul>
-    </div>
+    <ul class="navbar navbar-nav">
+        <li class="nav-item-explore active">
+          <button id="navbar-sites-button" class="button navbar-button">
+              F5 Sites
+              <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
+          </button>
+          <div class="dropdown-content" id="dropdown-content">
+            <ul>
+              {{ range $f5Sites }}
+                <li>
+                  <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
+                  <p>{{ .description }}</p>
+                </li>
+              {{ end }}
+            </ul>
+          </div>
+        </li>
+    </ul>
 
     </div>
 </div>

From aff6069f3bd5fee1c37c73377ef8cb6a84c77de2 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Wed, 2 Jul 2025 13:29:32 +0100
Subject: [PATCH 08/11] Sidebar: Add fixed position for mobile view

Move search to sidebar for mobile view
---
 assets/css/v2/style.css          | 27 ++++++++++++++++++++++++++-
 layouts/partials/header.html     | 12 ++++++------
 layouts/partials/sidebar-v2.html | 26 ++++----------------------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 8f2cbb7c..bb5aec2c 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -550,6 +550,12 @@ ol li:last-child {
     display: flex;
     align-self: center;
   }
+
+  .header {
+    .header__logo-small {
+      display: unset;
+    }
+  }
 }
 
 /* sidebar layout */
@@ -614,6 +620,10 @@ ol li:last-child {
       scrollbar-gutter: stable;
     }
   }
+
+  .sidebar__search {
+    display: none;
+  }
 }
 
 /* This is our "mobile" or no sidebar breakpoint */
@@ -622,10 +632,20 @@ ol li:last-child {
     .sidebar {
       /* Above search */
       z-index: 11;
-      display: unset;
+      display: block;
       transform: translateX(0);
       border-bottom: 1px solid oklch(var(--color-divider));
       height: fit-content;
+      position: fixed;
+      top: 0;
+      left: 0;
+
+      .sidebar__search {
+        display: flex;
+        width: calc(var(--sidebar-width) - 4rem);
+        justify-self: anchor-center;
+        margin-left: -1rem;
+      }
     }
   }
 
@@ -636,6 +656,11 @@ ol li:last-child {
         margin: 0;
       }
     }
+    .header-container {
+      .header__search {
+        display: none;
+      }
+    }
   }
 
   .header__product-selector {
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 09bc3e96..ea05338f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,23 +1,23 @@
 {{ define "header" }}
 <div class="header-container">
+    <div class="header__sidebar__panel">
+        <label for="sidebar-panel">
+        {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
+        </label>
+    </div>
 
     <div class="header__logo-small">
         <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
             <img class="header__img" src="{{ "/images/icons/NGINX-product-icon.svg" | absURL }}" alt="NGINX Docs">
         </a>
     </div>
+
     <div class="header__logo">
         <a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
             <img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
         </a>
     </div>
 
-    <div class="header__sidebar__panel">
-        <label for="sidebar-panel">
-        {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
-        </label>
-    </div>
-
     <div class="header__product-selector">
         {{ $nginxProducts := slice
             (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index be843ae8..7155550f 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -1,25 +1,3 @@
-{{ $nginxProducts := slice
-    (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
-    (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
-    (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
-    (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
-    (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
-    (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
-    (dict "title" "Subscription Licensing & Solutions" "url" "/solutions/" "type" "nginx-one")
-    (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
-    (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
-    (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
-    (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
-    (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
-}}
-{{ $productMap := dict }}
-{{ range $nginxProducts }}
-    {{ $productId := index (split .url "/") 1 }}
-    {{ $productMap = merge $productMap (dict $productId .title) }}
-{{ end }}
-{{ $relPermalink := .RelPermalink }}
-{{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
-{{ $productName := index $productMap $productIdentifier }}
 
 <div class="sidebar__container">
     <div class="sidebar__header">
@@ -34,6 +12,10 @@
             </label>
         </div>
     </div>
+    <div class="sidebar__search">
+      <!-- Standalone search box. -->
+      {{ partial "coveo-atomic-search.html" }}
+    </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>
         {{ partial "sidebar-list.html" (dict

From 64a4f6f6bbd000ad73f682c2930001c909e97a75 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Wed, 2 Jul 2025 10:46:21 -0700
Subject: [PATCH 09/11] Coveo: Resolved issue with coveo not rendering on
 sidebar AND header

---
 assets/js/coveo.js                        | 47 ++++++++++++++++-------
 layouts/partials/coveo-atomic-search.html |  3 +-
 layouts/partials/header.html              |  2 +-
 layouts/partials/sidebar-v2.html          |  2 +-
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/assets/js/coveo.js b/assets/js/coveo.js
index a1cd00ab..0d8798fe 100644
--- a/assets/js/coveo.js
+++ b/assets/js/coveo.js
@@ -36,6 +36,7 @@ async function atomicCoveo() {
   /* Initialize the interfaces with credentials */
   const searchPageInterface = document.querySelector('#search-v2');
   const searchBarHeader = document.querySelector('#search-standalone-header');
+  const searchBarSidebar = document.querySelector('#search-standalone-sidebar');
 
   if (searchPageInterface) {
     await searchPageInterface.initialize({
@@ -53,21 +54,41 @@ async function atomicCoveo() {
     await searchPageInterface.executeFirstSearch();
   }
 
-  /* Initialize the header searchbar*/
-  await searchBarHeader.initialize({
-    accessToken: token,
-    organizationId: org_id,
-    analytics: { analyticsMode: 'legacy' },
-    preprocessRequest: (request) => {
-      const body = JSON.parse(request.body);
-      body.q = `<@- ${body.q} -@>`;
-      request.body = JSON.stringify(body);
+  /* Initialize the header searchbar */
+  if (searchBarHeader) {
+    await searchBarHeader.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      analytics: { analyticsMode: 'legacy' },
+      preprocessRequest: (request) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
 
-      return request;
-    },
-  });
+        return request;
+      },
+    });
 
-  await searchBarHeader.executeFirstSearch();
+    await searchBarHeader.executeFirstSearch();
+  }
+
+  /* Initialize the sidebar searchbar */
+  if (searchBarSidebar) {
+    await searchBarSidebar.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      analytics: { analyticsMode: 'legacy' },
+      preprocessRequest: (request) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
+
+        return request;
+      },
+    });
+
+    await searchBarSidebar.executeFirstSearch();
+  }
 }
 
 document.addEventListener('DOMContentLoaded', async () => {
diff --git a/layouts/partials/coveo-atomic-search.html b/layouts/partials/coveo-atomic-search.html
index 06f84f61..8b9d54df 100644
--- a/layouts/partials/coveo-atomic-search.html
+++ b/layouts/partials/coveo-atomic-search.html
@@ -1,5 +1,6 @@
 {{ $redirectionUrl := .redirectionUrl | default "/search.html" }}
-<atomic-search-interface id="search-standalone-header">
+{{ $id := .id | default "search-standalone-header"}}
+<atomic-search-interface id={{ $id }}>
     <atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">
     </atomic-search-box>
 </atomic-search-interface>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index ea05338f..c8c5ca96 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -80,7 +80,7 @@
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
       <div class="header__search">
         <!-- Standalone search box. -->
-        {{ partial "coveo-atomic-search.html" }}
+        {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
       </div>
     {{ end }}
 
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index 7155550f..c957168c 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -14,7 +14,7 @@
     </div>
     <div class="sidebar__search">
       <!-- Standalone search box. -->
-      {{ partial "coveo-atomic-search.html" }}
+      {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
     </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>

From b7cad434e99fe77d42e12a998dada7a808f8c173 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Wed, 2 Jul 2025 11:09:37 -0700
Subject: [PATCH 10/11] Coveo: Fixed issue with searchbar on search page

---
 assets/css/v2/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index bb5aec2c..b88c0416 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -951,6 +951,10 @@ main {
   --atomic-border-radius-md: 0;
   --atomic-border-radius: 0;
   --atomic-font-family: var(--font-family);
+
+  atomic-search-box {
+    z-index: 0;
+  }
 }
 
 atomic-search-interface {

From 2eea44ef3b88cadb26656efb0e0427ed88dd9429 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Thu, 3 Jul 2025 10:05:44 +0100
Subject: [PATCH 11/11] Sidebar: Make mobile sidebar full length

---
 assets/css/v2/style.css                   | 13 ++-
 assets/js/site-dropdown.js                | 12 +++
 layouts/partials/coveo-atomic-search.html |  2 +-
 layouts/partials/coveo-legacy-search.html |  4 -
 layouts/partials/coveo-legacy.html        | 98 -----------------------
 layouts/partials/sidebar-v2.html          | 27 ++++---
 6 files changed, 37 insertions(+), 119 deletions(-)
 delete mode 100644 layouts/partials/coveo-legacy-search.html
 delete mode 100644 layouts/partials/coveo-legacy.html

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index b88c0416..e0008af0 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -441,6 +441,7 @@ ol li:last-child {
     }
 
     .header__search {
+      display: block;
       width: 14rem;
       /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
       transform: translateY(0);
@@ -635,16 +636,20 @@ ol li:last-child {
       display: block;
       transform: translateX(0);
       border-bottom: 1px solid oklch(var(--color-divider));
-      height: fit-content;
+
       position: fixed;
       top: 0;
       left: 0;
 
-      .sidebar__search {
+      .sidebar__content__wrapper {
         display: flex;
+        flex-direction: column;
+      }
+
+      .sidebar__search {
+        display: unset;
         width: calc(var(--sidebar-width) - 4rem);
-        justify-self: anchor-center;
-        margin-left: -1rem;
+        margin-left: 1rem;
       }
     }
   }
diff --git a/assets/js/site-dropdown.js b/assets/js/site-dropdown.js
index b71e9c3c..4d9c9ec3 100644
--- a/assets/js/site-dropdown.js
+++ b/assets/js/site-dropdown.js
@@ -1,12 +1,17 @@
 document.addEventListener('DOMContentLoaded', () => {
   const dropdownContent = document.getElementById('dropdown-content');
   const navbarButton = document.getElementById('navbar-sites-button');
+  const chevronIcon = document.getElementById('navbar-sites-button-icon');
 
   navbarButton.addEventListener('click', () => {
+    chevronIcon.classList.toggle('rotate-chevron');
+
     if (dropdownContent.style.display === 'block') {
       dropdownContent.style.display = 'none';
+      navbarButton.classList.remove('remove-bottom-radius');
     } else {
       dropdownContent.style.display = 'block';
+      navbarButton.classList.add('remove-bottom-radius');
     }
   });
 
@@ -15,7 +20,14 @@ document.addEventListener('DOMContentLoaded', () => {
       !event.target.matches('#navbar-sites-button') &&
       !event.target.matches('#navbar-sites-button-icon')
     ) {
+      if (
+        dropdownContent.style.display !== 'none' &&
+        dropdownContent.style.display !== ''
+      ) {
+        chevronIcon.classList.toggle('rotate-chevron');
+      }
       dropdownContent.style.display = 'none';
+      navbarButton.classList.remove('remove-bottom-radius');
     }
   });
 });
diff --git a/layouts/partials/coveo-atomic-search.html b/layouts/partials/coveo-atomic-search.html
index 8b9d54df..41692455 100644
--- a/layouts/partials/coveo-atomic-search.html
+++ b/layouts/partials/coveo-atomic-search.html
@@ -3,4 +3,4 @@
 <atomic-search-interface id={{ $id }}>
     <atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">
     </atomic-search-box>
-</atomic-search-interface>
\ No newline at end of file
+</atomic-search-interface>
diff --git a/layouts/partials/coveo-legacy-search.html b/layouts/partials/coveo-legacy-search.html
deleted file mode 100644
index 958a0635..00000000
--- a/layouts/partials/coveo-legacy-search.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div id="searchbox">
-    <!--div class="CoveoAnalytics" data-search-hub="HUB_ES_Nginx_Docs_And_Org"></div-->
-    <div class="CoveoSearchbox" data-placeholder='Search NGINX Docs...'></div>
-</div>
\ No newline at end of file
diff --git a/layouts/partials/coveo-legacy.html b/layouts/partials/coveo-legacy.html
deleted file mode 100644
index 7fdec89a..00000000
--- a/layouts/partials/coveo-legacy.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<div id="search" class="CoveoSearchInterface" data-enable-history="true" >
-    <div class="CoveoFolding"></div>
-    <div class="CoveoAnalytics" data-search-hub="HUB_ES_Nginx_Docs_And_Org"></div>
-    <div class="coveo-search-section" style="display: none;">
-      <div class="CoveoSearchbox" data-enable-omnibox="true"></div>
-    </div>
-    <div class="coveo-main-section">
-      <div class="coveo-facet-column">
-        <div class="CoveoFacet" data-title="Show by product" data-field="@f5_product" data-tab="All"
-          data-number-of-values="15"></div>
-        <div class="CoveoFacet" id="f5_product_module" data-title="Module" data-field="@f5_product_module" data-enable-settings="true" data-is-multi-value-field="true" data-number-of-values="10"></div>
-        <button id="reset_btn"><img src="{{ "/images/svg/refresh.svg" | absURL }}">Reset</button>
-      </div>
-      <div class="coveo-results-column">
-        <div class="CoveoShareQuery"></div>
-        <div class="CoveoPreferencesPanel">
-          <div class="CoveoResultsPreferences"></div>
-          <div class="CoveoResultsFiltersPreferences"></div>
-        </div>
-        <div class="CoveoTriggers"></div>
-        <div class="CoveoBreadcrumb"></div>
-        <div class="CoveoDidYouMean"></div>
-        <div class="coveo-results-header">
-          <div class="coveo-summary-section">
-            <span class="CoveoQuerySummary">
-              <div class="coveo-show-if-no-results"></div>
-            </span>
-            <span class="CoveoQueryDuration"></span>
-          </div>
-          <div class="coveo-result-layout-section">
-            <span class="CoveoResultLayout"></span>
-          </div>
-          <div class="coveo-sort-section">
-            <span>Sort By: </span>
-            <span class="CoveoSort" data-sort-criteria="relevancy" data-caption="Relevance"></span>
-            <span class="CoveoSort"
-              data-sort-criteria="@f5_updated_published_date descending,@f5_updated_published_date ascending"
-              data-caption="Date"></span>
-          </div>
-        </div>
-        <div class="CoveoHiddenQuery"></div>
-        <div class="CoveoErrorReport" data-pop-up="false"></div>
-        <div class="CoveoResultList" data-layout="list" data-wait-animation="fade"
-          data-auto-select-fields-to-include="true">
-          <script id="Default" class="result-template" type="text/html" data-layout="list">
-                <div class="coveo-result-frame">
-                  <div class="coveo-result-cell" style="vertical-align:top;text-align:center;width:32px;">
-                    <img src="{{ "/images/article-icon.svg" | absURL }}" alt="Article" height="32" width="32" title="Article" />
-                  </div>
-                  <div class="coveo-result-cell" style="vertical-align: top;padding-left: 16px;">
-                    <div class="coveo-result-row" style="margin:0;">
-                      <div class="coveo-result-cell" style="vertical-align:top;font-size:16px;" role="heading" aria-level="2">
-                        <a class="CoveoResultLink" target="_blank"></a>
-                      </div>
-                      <div class="coveo-result-cell" style="width:120px;text-align:right;font-size:12px">
-                        <span class="CoveoQuickview" data-enable-loading-animation="false">
-                        Quick View
-                        </span>
-                        <div class="coveo-result-row">
-                        </div>
-                      </div>
-                    </div>
-                    <div class="coveo-result-row" style="margin: 0;">
-                      <div class="coveo-result-cell" id="uri_link">
-                        <span class="CoveoFieldValue" data-field="@Uri"></span>
-                      </div>
-                    </div>
-                    <div class="coveo-result-row" style="margin-top:10px;">
-                      <div class="coveo-result-cell">
-                        <span class="CoveoExcerpt"></span>
-                      </div>
-                    </div>
-                    <div class="coveo-result-row modified_date" style="margin-top:10px;">
-                      <div class="coveo-result-cell">
-                        <span class="CoveoFieldValue" data-field="@f5_updated_published_date" data-text-caption=' Modification Date:' data-helper="date" data-helper-options-predefined-format="MMM DD, yyyy">
-                        </span>
-                      </div>
-                    </div>
-                    <div class="coveo-result-row" style="margin-top:10px;">
-                      <div class="coveo-result-cell">
-                      </div>
-                    </div>
-                    <div class="coveo-result-row">
-                      <div class="coveo-result-cell">
-                        <div class="CoveoMissingTerms"></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </script>
-        </div>
-        <div class="pagination-bar">
-          <div class="CoveoPager"></div>
-          <div class="CoveoResultsPerPage"></div>
-        </div>
-      </div>
-    </div>
-  </div>
\ No newline at end of file
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index c957168c..0a3dba6f 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -12,17 +12,20 @@
             </label>
         </div>
     </div>
-    <div class="sidebar__search">
-      <!-- Standalone search box. -->
-      {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
-    </div>
-    <div class="sidebar__content">
-        <a class="skip-link" href="#maincontent">Skip Navigation</a>
-        {{ partial "sidebar-list.html" (dict
-        "firstSection" .FirstSection
-        "currentUrl" .Permalink
-        "currentPage" .
-        "idPrefix" ""
-      ) }}
+    <div class="sidebar__content__wrapper">
+        <div class="sidebar__search">
+          <!-- Standalone search box. -->
+          {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
+        </div>
+        <div class="sidebar__content">
+            <a class="skip-link" href="#maincontent">Skip Navigation</a>
+            {{ partial "sidebar-list.html" (dict
+            "firstSection" .FirstSection
+            "currentUrl" .Permalink
+            "currentPage" .
+            "idPrefix" ""
+          ) }}
+        </div>
     </div>
+
 </div>