Sidebar: Add fixed position for mobile view

Move search to sidebar for mobile view

Author: nginx-jack

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 {

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")

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