Skip to content

Commit 23ec93b

Browse files
committed
Headers: Handle show hide logo depending on page
1 parent e9b2699 commit 23ec93b

File tree

2 files changed

+45
-4
lines changed

2 files changed

+45
-4
lines changed

assets/css/v2/style.css

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,10 @@ textarea:not([rows]) {
246246
--grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
247247
--grid-columns: 12;
248248

249+
/* TODO: This aligns the logo in the header perfectly with the one in the sidebar, but
250+
this is not a safe way to do it, and likely to get out of sync */
251+
--header-height: 93px;
252+
249253
--sidebar-width: 22rem;
250254
--sidebar-item-padding: 0.25rem 0.75rem;
251255
--content-max-width: 88rem;
@@ -333,7 +337,7 @@ ol li:last-child {
333337
.grid-container {
334338
display: grid;
335339
grid-template-columns: var(--sidebar-width) 1fr;
336-
grid-template-rows: var(--space-3xl) 1fr auto;
340+
grid-template-rows: var(--header-height) 1fr auto;
337341
grid-template-areas:
338342
"sidebar header"
339343
"sidebar content"
@@ -347,6 +351,10 @@ ol li:last-child {
347351
"content"
348352
"footer";
349353
}
354+
355+
.header__logo {
356+
display: none;
357+
}
350358
}
351359

352360
/* Homepage specific layout */
@@ -360,6 +368,14 @@ ol li:last-child {
360368
.sidebar {
361369
display: none;
362370
}
371+
372+
.header__logo {
373+
display: unset;
374+
}
375+
376+
.header__product-selector {
377+
display: none;
378+
}
363379
}
364380

365381
/* Search specific layout */
@@ -373,6 +389,10 @@ ol li:last-child {
373389
.sidebar {
374390
display: none;
375391
}
392+
393+
.header__logo {
394+
display: unset;
395+
}
376396
}
377397

378398
.header {
@@ -388,6 +408,19 @@ ol li:last-child {
388408
align-items: center;
389409
width: 100%;
390410

411+
.header__img {
412+
height: 2rem;
413+
padding-left: 12px;
414+
}
415+
416+
.header__search {
417+
width: 14rem;
418+
}
419+
420+
.header__product-selector {
421+
width: 10rem;
422+
}
423+
391424
> ul {
392425
padding: 0;
393426
}

layouts/partials/header.html

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
{{ define "header" }}
22
<div class="header-container">
3-
<div>Product Selector</div>
3+
4+
<div class="header__logo">
5+
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
6+
<img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
7+
</a>
8+
</div>
9+
10+
<div class="header__product-selector">Product Selector</div>
11+
412
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
5-
<div>
13+
<div class="header__search">
614
<!-- Standalone search box. -->
715
{{ partial "coveo-atomic-search.html" }}
816
</div>
917
{{ end }}
1018

11-
<div>
19+
<div class="header__f5sites">
1220
{{ $f5Sites := slice
1321
(dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
1422
(dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")

0 commit comments

Comments
 (0)