nginxinc · nginx-jack · Jun 25, 2025 · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025
@@ -4,24 +4,19 @@ document.addEventListener('DOMContentLoaded', () => {
     'product-selector-button'
   );
 
-  if (productSelectorButton === null || productSelectorContent == null) {
-    return;
-  }
+  if (!productSelectorButton || !productSelectorContent) return;
 
   productSelectorButton.addEventListener('click', () => {
-    /* Logic for hiding/showing ONLY when the button is clicked */
-    if (productSelectorContent.style.display === 'block') {
-      productSelectorContent.style.display = 'none';
-      productSelectorButton.classList.remove('remove-bottom-radius');
-    } else {
-      productSelectorContent.style.display = 'block';
-      productSelectorButton.classList.add('remove-bottom-radius');
-    }
+    const isVisible = productSelectorContent.style.display === 'block';
+    productSelectorContent.style.display = isVisible ? 'none' : 'block';
+    productSelectorButton.classList.toggle('remove-bottom-radius', !isVisible);
   });
 
   window.addEventListener('click', (event) => {
-    /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
-    if (!event.target.id.includes('product-selector')) {
+    const isClickInside =
+      productSelectorButton.contains(event.target) ||
+      productSelectorContent.contains(event.target);
+    if (!isClickInside) {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
     }

@@ -53,4 +53,4 @@ This is a compilation of all our shortcodes to show how they look, function, res
       Installing NGINX
     {{</card >}}
   {{</card-section >}}
-{{</card-layout >}}
+{{</card-layout >}}
@@ -39,24 +39,27 @@
 
   <body id="body">
     {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
-  {{ partial "universal-tag.html" . }}
+    {{ partial "universal-tag.html" . }}
     {{ end }}
+    <div class="grid-container">
+        <aside class="sidebar">
+            {{ partial "sidebar-v2.html" . }}
+        </aside>
 
-    <header>
-      {{ block "header" . }}{{end}}
-    </header>
+        <header class="header">
+            {{ block "header" . }}{{end}}
+        </header>
 
-    <section class="base-layout" data-testid="base-layout">
-      <div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
         {{ block "main" . }}{{ end }}
-      </div>
-  </section>
-
-    <footer id="footer-v2">
-      {{ block "footer-v2" . }}
-      {{ partial "footer-v2.html" . }}
-      {{ end }}
-    </footer>
+
+        <footer class="footer">
+            {{ block "footer-v2" . }}
+            {{ partial "footer-v2.html" . }}
+            {{ end }}
+        </footer>
+    </div>
+
+
   {{ partial "scripts.html" . }}
   <div id="consent_blackbar"></div>
 </body>

@@ -1,58 +1,50 @@
 {{ define "main" }}
-{{/*  mf list page  */}}
-<main class="content col d-block align-top content-has-toc" role="main">
-<section class="main-layout">
-  <div class="sidebar-layout" id="sidebar-layout">
-    <button class="sidebar__mobile__toggle" aria-label="sidebar__mobile__toggle" aria-expanded="false">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
-    <nav id="sidebar-v2" class="sidebar">
-      {{ partial "sidebar-v2.html" . }}
-    </nav>
-  </div>
 
-  <section id="maincontent" class="content-layout">
+<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">
+        <section class="breadcrumb-layout wide">
         {{ if not .IsHome }}
-          {{ if not (in .Params.display_breadcrumb "false" ) }}
-          {{ partial "breadcrumb" .}}
-          {{ end }}
+            {{ if not (in .Params.display_breadcrumb "false" ) }}
+            {{ partial "breadcrumb" .}}
+            {{ end }}
         {{ end }}
-      </section>
-      <div class="list-header-container">
-        <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
-        <div class="list-header-title">
-          <h1>{{ .Title }}</h1>
-          {{ if index .Params "nd-subtitle" }}
-            <p>{{ index .Params "nd-subtitle" | markdownify }}</p>
-          {{ end }}
+        </section>
+        <div class="list-header-container">
+          <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
+          <div class="list-header-title">
+            <h1>{{ .Title }}</h1>
+            {{ if index .Params "nd-subtitle" }}
+              <p>{{ index .Params "nd-subtitle" | markdownify }}</p>
+            {{ end }}
+          </div>
         </div>
-      </div>
 
-      {{ partial "banner" . }}
-      {{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
-      {{ if $hasCustomContent }} 
+        {{ partial "banner" . }}
+
+        {{ $hasCustomContent := index .Params "nd-landing-page" | default false }}
+        {{ if $hasCustomContent }}
         {{ .Content }}
-      {{ else }}
+        {{ else }}
         {{ range .Pages.ByWeight }}
         <h2>
             <a href="{{ if .Params.url}}{{ .Params.url}}{{else}}{{ .Permalink }}{{end}}">{{ .Title }}</a>
         </h2>
         {{ end }}
-      {{ end }}
+        {{ end }}
 
-      <hr>
-      {{ if .Page.Lastmod }}
-      <div class="last-modified">
+        <hr>
+        {{ if .Page.Lastmod }}
+        <div class="last-modified">
         {{ partial "page-meta-links" . }}
-      </div>
-      {{ end }}
-
-      </main>
+        </div>
+        {{ end }}
 
     </div>
-  </section>
-</section>
+    </section>
 </section>
 </main>
-{{ end }}
 
+
+{{ end }}
@@ -1,32 +1,19 @@
 {{ define "main" }}
-<div class="docs-container row override-sidebar-collapse">
-  <!-- Replace icons -->
-  {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 
-  {{if (.Params.catalog) }}
-  <main class="content content-has-toc" role="main">
-  {{ else if and (gt .WordCount 200 ) (.Params.toc) }}
-  <main class="content col d-block align-top content-has-toc" role="main">
-  {{ else }}
-  <main class="content col d-block align-top content-no-toc" role="main">
-  {{ end }}
-
-  <section class="main-layout">
-    <div class="sidebar-layout" id="sidebar-layout">
-      <button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
-      <nav data-mf="true" id="sidebar-v2" class="sidebar">
-        {{ partial "sidebar-v2.html" . }}
-      </nav>
-    </div>
+<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">
-      <div data-cms-edit="content" class="text-content">
-        <section class="breadcrumb-layout wide" data-mf="true" style="display: none;">
-          {{ if not .IsHome }}
+        <div data-cms-edit="content" class="text-content">
+        <section class="breadcrumb-layout wide">
+            {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}
             {{ end }}
-          {{ end }}
+            {{ end }}
         </section>
         {{ partial "banner" .}}
         <h1>{{ .Title }}</h1>
@@ -38,31 +25,30 @@ <h1>{{ .Title }}</h1>
 
         {{ if .Page.Lastmod }}
         <div class="last-modified">
-          {{ partial "page-meta-links" . }}
+            {{ partial "page-meta-links" . }}
         </div>
         {{ end }}
 
         {{ partial "version-list" . }}
         {{ partial "qualtrics-feedback.html" }}
 
         {{ partial "previous-next-links-in-section-with-title.html" . }}
-        </main>
-        {{ if and (gt .WordCount 200 ) (.Params.toc) }}
-          {{ if (add  (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
-            <div id="toc" class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
-            {{ partial "toc.html" . }}
-            </div>
-          {{ end }}
-        {{ end }}
 
-      </div>
+        </main>
+    </section>
     </section>
-  </section>
-</div>
+</main>
+
+
+
 <!-- If there is a script defined in the page metadata, load it  -->
 {{if .Params.script}}
-  {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
-  {{ partial (string $script) .}}
+    {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+    {{ partial (string $script) .}}
 {{end }}
 
-{{ end }}
+
+
+
+
+{{ end }}
@@ -1,33 +1,87 @@
 {{ define "header" }}
-<div class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar navbar-fixed-top">
-  <div class="container-fluid flex-md-row flex-column header-container">
-    <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="NGINX Docs">
-      <img class="navbar-img" src="{{ "/images/icons/NGINX-Docs-horiz-white-type.svg" | absURL }}" alt="NGINX Docs">
-    </a>
+<div class="header-container">
+
+    <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__product-selector">
+        {{ $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" "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 }}
+            {{ if not (or (eq .title "NGINX Open Source" ) (eq .title "NGINX Unit")) }}
+              {{ $productId := index (split .url "/") 1 }}
+              {{ $productMap = merge $productMap (dict $productId .title) }}
+            {{ end }}
+        {{ end }}
+        {{ $relPermalink := .RelPermalink }}
+        {{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
+        {{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}
+
+        <button class="product-selector__button" id="product-selector-button">
+            {{/* product name and selector */}}
+            <span class="product-name">{{ $productName }}</span>
+            <span class="product-selector-button-icon">
+                <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </span>
+        </button>
+        <div class="product-selector" id="product-selector">
+            {{ $groupedProducts := dict
+                "nginx-one" (where $nginxProducts "type" "nginx-one")
+                "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
+                "nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
+                "nginx-other" (where $nginxProducts "type" "nginx-other")
+            }}
+            {{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
+            {{ range $orderedKeys }}
+            {{ $type := . }}
+            {{ $products := index $groupedProducts $type }}
+                <div class="product-selector-content" id="product-selector-content">
+                    <p>{{ $type | humanize | title | upper }}</p>
+                    <ul>
+                    {{ range $products }}
+                        <li>
+                            <a href="{{ .url }}">{{ .title }}</a>
+                        </li>
+                    {{ end }}
+                    </ul>
+                </div>
+            {{ end }}
+        </div>
+
+
+    </div>
+
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-      <div class="navbar navbar-nav">
+      <div class="header__search">
         <!-- Standalone search box. -->
         {{ partial "coveo-atomic-search.html" }}
       </div>
     {{ end }}
-    {{ if ( in .Site.Params.buildtype "package" ) }}
-    <div class="navbar-nav-scroll" id="navbarNavScroll">
-      <ul class="navbar-nav flex-row">
-        <li class="nav-item dropdown active">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Sections
-          </a>
-          {{ partial "products-menu.html" . }}
-        </li>
-      </ul>
-    </div>
-    {{ end }}
-
-    {{ $f5Sites := slice 
+
+    <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")
     }}
+
     <ul class="navbar navbar-nav">
         <li class="nav-item-explore active">
           <button id="navbar-sites-button" class="button navbar-button">
@@ -46,7 +100,7 @@
           </div>
         </li>
     </ul>
-  </div>
-</div>
 
+    </div>
+</div>
 {{ end }}