Headers: Handle show hide logo depending on page

Author: nginx-jack

assets/css/v2/style.css

@@ -246,6 +246,10 @@ 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: 93px;
+
   --sidebar-width: 22rem;
   --sidebar-item-padding: 0.25rem 0.75rem;
   --content-max-width: 88rem;
@@ -333,7 +337,7 @@ ol li:last-child {
 .grid-container {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: var(--space-3xl) 1fr auto;
+  grid-template-rows: var(--header-height) 1fr auto;
   grid-template-areas:
     "sidebar header"
     "sidebar content"
@@ -347,6 +351,10 @@ ol li:last-child {
       "content"
       "footer";
   }
+
+  .header__logo {
+    display: none;
+  }
 }
 
 /* Homepage specific layout */
@@ -360,6 +368,14 @@ ol li:last-child {
   .sidebar {
     display: none;
   }
+
+  .header__logo {
+    display: unset;
+  }
+
+  .header__product-selector {
+    display: none;
+  }
 }
 
 /* Search specific layout */
@@ -373,6 +389,10 @@ ol li:last-child {
   .sidebar {
     display: none;
   }
+
+  .header__logo {
+    display: unset;
+  }
 }
 
 .header {
@@ -388,6 +408,19 @@ ol li:last-child {
     align-items: center;
     width: 100%;
 
+    .header__img {
+      height: 2rem;
+      padding-left: 12px;
+    }
+
+    .header__search {
+      width: 14rem;
+    }
+
+    .header__product-selector {
+      width: 10rem;
+    }
+
     > ul {
       padding: 0;
     }

layouts/partials/header.html

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