Collapsible sidebar

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 () => {

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" . }}

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

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>

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>
+</atomic-search-interface>

layouts/partials/header.html

@@ -1,5 +1,16 @@
 {{ 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">
@@ -64,14 +75,12 @@
                 </div>
             {{ end }}
         </div>
-
-
     </div>
 
     {{ 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 }}
 

layouts/partials/sidebar-v2.html

@@ -1,39 +1,31 @@
-{{ $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">
-        <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>
-        {{ 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>