Header: Fix search and f5 sites

Author: nginx-jack

assets/css/v2/style.css

@@ -333,7 +333,7 @@ ol li:last-child {
 .grid-container {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: var(--space-xl) 1fr auto;
+  grid-template-rows: var(--space-3xl) 1fr auto;
   grid-template-areas:
     "sidebar header"
     "sidebar content"
@@ -387,6 +387,41 @@ ol li:last-child {
     }
   }
 
+  .dropdown-content {
+    position: absolute;
+    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;
+    right: 0;
+    display: none;
+    width: 400px;
+    max-width: 80vw;
+    margin-right: 2rem;
+  }
+
+  .dropdown-content ul {
+    padding: 20px 10px;
+  }
+
+  .nav-item-explore {
+    margin: 0;
+  }
+
+  .navbar-button {
+    padding: 0.5rem 0.5rem;
+    border: none;
+    border-radius: 0.25rem;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .remove-bottom-radius {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   ul {
     list-style: none;
   }
@@ -778,7 +813,7 @@ nav {
 @media (min-width: 88em) {
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 70px max-content;
+    grid-template-rows: 3rem max-content;
     column-gap: var(--grid-column-gutter);
   }
 
@@ -843,8 +878,6 @@ nav {
 
 atomic-search-interface {
   height: fit-content;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
 }
 
 .header-search-box {

layouts/_default/list.html

@@ -2,7 +2,6 @@
 
 <main class="content content-has-toc" role="main">
 <section class="main-layout">
-
     <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">
         <section class="breadcrumb-layout wide">
@@ -41,6 +40,6 @@ <h2>
     </section>
 </section>
 </main>
-</div>
+
 
 {{ end }}

layouts/partials/header.html

@@ -1,7 +1,39 @@
 {{ define "header" }}
 <div class="header-container">
     <div>Product Selector</div>
-    <div>Search</div>
-    <div>F5 Sites</div>
+    {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
+      <div>
+        <!-- Standalone search box. -->
+        {{ partial "coveo-atomic-search.html" }}
+      </div>
+    {{ end }}
+
+    <div>
+    {{ $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")
+    }}
+
+    <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>
 {{ end }}

layouts/partials/sidebar-v2.html

@@ -1,4 +1,4 @@
-{{ $nginxProducts := slice 
+{{ $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")