Skip to content

Commit 03b9f07

Browse files
nginx-jacknginx-jack
committed
Headers: Add back product selector
1 parent 23ec93b commit 03b9f07

File tree

3 files changed

+99
-17
lines changed

3 files changed

+99
-17
lines changed

‎assets/css/v2/style.css

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,23 @@ ol li:last-child {
419419

420420
.header__product-selector {
421421
width: 10rem;
422+
423+
.product-selector__button {
424+
display: flex;
425+
align-items: center;
426+
background: oklch(var(--color-background));
427+
border: none;
428+
width: 16rem;
429+
font-weight: 500;
430+
cursor: pointer;
431+
color: oklch(var(--color-foreground));
432+
text-decoration-color: oklch(var(--color-brand) / 0.3);
433+
transition: color 0.15s ease-in-out;
434+
435+
& :hover {
436+
color: oklch(var(--color-brand));
437+
}
438+
}
422439
}
423440

424441
> ul {
@@ -1032,18 +1049,31 @@ body:not(:has(.main-layout)) header atomic-search-interface {
10321049
*/
10331050

10341051
.product-selector {
1052+
/* should appear above search box on smaller displays */
1053+
z-index: 11;
10351054
display: none;
10361055
position: absolute;
10371056
top: 0;
1038-
min-width: 80%;
1039-
margin-top: 8.375rem;
1040-
margin-left: 44rem;
1057+
margin-top: 4em;
10411058
padding: 1rem 1.5rem;
10421059
background-color: oklch(var(--color-background));
10431060
border: oklch(var(--color-foreground)) 1px solid;
10441061
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
10451062
}
10461063

1064+
.product-name {
1065+
padding-right: var(--space-s);
1066+
}
1067+
1068+
.product-selector-button-icon {
1069+
color: black;
1070+
1071+
svg {
1072+
color: black;
1073+
stroke: currentColor;
1074+
}
1075+
}
1076+
10471077
button:has(~ .product-selector[style*="block"])
10481078
> .product-selector-button-icon {
10491079
transition: transform 0.1s ease-in-out;

‎assets/js/product-selector.js

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,19 @@ document.addEventListener('DOMContentLoaded', () => {
44
'product-selector-button'
55
);
66

7-
if (productSelectorButton === null || productSelectorContent == null) {
8-
return;
9-
}
7+
if (!productSelectorButton || !productSelectorContent) return;
108

119
productSelectorButton.addEventListener('click', () => {
12-
/* Logic for hiding/showing ONLY when the button is clicked */
13-
if (productSelectorContent.style.display === 'block') {
14-
productSelectorContent.style.display = 'none';
15-
productSelectorButton.classList.remove('remove-bottom-radius');
16-
} else {
17-
productSelectorContent.style.display = 'block';
18-
productSelectorButton.classList.add('remove-bottom-radius');
19-
}
10+
const isVisible = productSelectorContent.style.display === 'block';
11+
productSelectorContent.style.display = isVisible ? 'none' : 'block';
12+
productSelectorButton.classList.toggle('remove-bottom-radius', !isVisible);
2013
});
2114

2215
window.addEventListener('click', (event) => {
23-
/* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
24-
if (!event.target.id.includes('product-selector')) {
16+
const isClickInside =
17+
productSelectorButton.contains(event.target) ||
18+
productSelectorContent.contains(event.target);
19+
if (!isClickInside) {
2520
productSelectorContent.style.display = 'none';
2621
productSelectorButton.classList.remove('remove-bottom-radius');
2722
}

‎layouts/partials/header.html

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,64 @@
77
</a>
88
</div>
99

10-
<div class="header__product-selector">Product Selector</div>
10+
<div class="header__product-selector">
11+
{{ $nginxProducts := slice
12+
(dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
13+
(dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
14+
(dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
15+
(dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
16+
(dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
17+
(dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
18+
(dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
19+
(dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
20+
(dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
21+
(dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
22+
(dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
23+
}}
24+
{{ $productMap := dict }}
25+
{{ range $nginxProducts }}
26+
{{ $productId := index (split .url "/") 1 }}
27+
{{ $productMap = merge $productMap (dict $productId .title) }}
28+
{{ end }}
29+
{{ $relPermalink := .RelPermalink }}
30+
{{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
31+
{{ $productName := index $productMap $productIdentifier }}
32+
33+
<button class="product-selector__button" id="product-selector-button">
34+
{{/* product name and selector */}}
35+
<span class="product-name">{{ $productName }}</span>
36+
<span class="product-selector-button-icon">
37+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
38+
<path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
39+
</svg>
40+
</span>
41+
</button>
42+
<div class="product-selector" id="product-selector">
43+
{{ $groupedProducts := dict
44+
"nginx-one" (where $nginxProducts "type" "nginx-one")
45+
"nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
46+
"nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
47+
"nginx-other" (where $nginxProducts "type" "nginx-other")
48+
}}
49+
{{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
50+
{{ range $orderedKeys }}
51+
{{ $type := . }}
52+
{{ $products := index $groupedProducts $type }}
53+
<div class="product-selector-content" id="product-selector-content">
54+
<p>{{ $type | humanize | title | upper }}</p>
55+
<ul>
56+
{{ range $products }}
57+
<li>
58+
<a href="{{ .url }}">{{ .title }}</a>
59+
</li>
60+
{{ end }}
61+
</ul>
62+
</div>
63+
{{ end }}
64+
</div>
65+
66+
67+
</div>
1168

1269
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
1370
<div class="header__search">

0 commit comments

Comments
 (0)