Skip to content

Commit 1431bfe

Browse files
nginx-jackTasoOneAsia
nginx-jack
authored and
TasoOneAsia
committed
ProductSelector: New product selector
1 parent 5ea672e commit 1431bfe

File tree

2 files changed

+151
-63
lines changed

2 files changed

+151
-63
lines changed

‎assets/css/v2/style.css‎

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,9 @@ textarea:not([rows]) {
242242

243243
--overflow-gutter-extension: -1rem;
244244

245+
/* Product Selector */
246+
--product-selector-background: 0.9851 0 0;
247+
245248
/* vars for the primary grid setup */
246249
--grid-content: minmax(34rem, 50rem);
247250
--grid-content-mobile: minmax(20rem, 50rem);
@@ -462,7 +465,7 @@ ol li:last-child {
462465
}
463466

464467
.sidebar,
465-
.header__product-selector,
468+
.product-selector,
466469
.header__sidebar__panel,
467470
.header__control--sidebar,
468471
.header__logo-small {
@@ -697,14 +700,17 @@ ol li:last-child {
697700
padding: 0 0 var(--space-s) var(--space-s);
698701

699702
.sidebar__container {
700-
display: grid;
701-
grid-template-rows: var(--header-height) 1fr;
703+
display: flex;
704+
flex-direction: column;
702705
height: 100%;
703706

704707
.sidebar__header {
708+
gap: 1rem;
705709
display: flex;
710+
flex-direction: column;
706711
align-items: center;
707712
justify-content: flex-start;
713+
height: fit-content;
708714
position: sticky;
709715
top: 0;
710716
background: oklch(var(--color-background));
@@ -716,26 +722,68 @@ ol li:last-child {
716722
width: 2rem;
717723
}
718724

719-
.header__product-selector {
720-
width: 10rem;
721-
background: rgba(0, 0, 0, 0);
725+
details summary::marker {
726+
display: none;
727+
}
728+
729+
.product-selector {
730+
align-self: start;
731+
width: auto;
732+
background: oklch(var(--product-selector-background));
722733
color: oklch(var(--color-foreground));
723734
text-decoration-color: oklch(var(--color-brand) / 0.3);
724735
& button:hover * {
725736
color: oklch(var(--color-brand));
726737
}
727738

728-
.product-selector__button {
739+
.product-selector__content {
740+
padding-bottom: 1rem;
741+
}
742+
743+
.product-selector__toggle {
729744
display: flex;
745+
justify-content: space-between;
746+
padding-inline-end: 4px;
730747
align-items: center;
731-
background: rgba(0, 0, 0, 0);
732-
border: none;
733-
width: 16rem;
734-
font-weight: 500;
735-
cursor: pointer;
736-
color: oklch(var(--color-foreground));
737-
text-decoration-color: oklch(var(--color-brand) / 0.3);
738-
transition: color 0.15s ease-in-out;
748+
}
749+
750+
.product-selector__product-group {
751+
padding-block-start: 0.5rem;
752+
padding-inline-start: 1rem;
753+
}
754+
755+
.product-selector__product {
756+
padding-block-start: 0.5rem;
757+
padding-inline-start: 1.5rem;
758+
a {
759+
font-weight: 400;
760+
color: black;
761+
}
762+
}
763+
764+
.product-selector__section[open]
765+
.product-selector__toggle
766+
.product-selector__chevron {
767+
transform: rotate(90deg);
768+
}
769+
770+
details > summary {
771+
list-style: none;
772+
padding-inline-start: 1rem;
773+
align-content: center;
774+
font-size: var(--font-step-1);
775+
color: oklch(var(--color-background));
776+
background-color: oklch(var(--color-brand));
777+
width: 21rem;
778+
height: 2.5rem;
779+
780+
> li {
781+
padding-inline-start: 0.5rem;
782+
}
783+
}
784+
785+
details > summary::-webkit-details-marker {
786+
display: none;
739787
}
740788
}
741789
}
@@ -793,8 +841,6 @@ ol li:last-child {
793841
}
794842
}
795843
}
796-
797-
798844
}
799845
}
800846

@@ -824,7 +870,7 @@ ol li:last-child {
824870
}
825871

826872
.header {
827-
.header__product-selector {
873+
.product-selector {
828874
display: none;
829875
}
830876

@@ -1339,19 +1385,6 @@ body:not(:has(.main-layout)) header atomic-search-interface {
13391385

13401386
/* MARK: Product Selector
13411387
*/
1342-
1343-
.product-selector {
1344-
/* should appear above search box on smaller displays */
1345-
z-index: 11;
1346-
position: absolute;
1347-
top: 0;
1348-
margin-block-start: calc(var(--header-height) - 1rem);
1349-
padding: 1rem 1.5rem;
1350-
background-color: oklch(var(--color-background));
1351-
border: oklch(var(--color-foreground)) 1px solid;
1352-
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1353-
}
1354-
13551388
.product-name {
13561389
padding-inline-end: var(--space-s);
13571390
}
@@ -1365,34 +1398,6 @@ body:not(:has(.main-layout)) header atomic-search-interface {
13651398
}
13661399
}
13671400

1368-
button:has(~ .product-selector[style*="block"])
1369-
> .product-selector-button-icon {
1370-
transition: transform 0.1s ease-in-out;
1371-
transform: rotate(90deg);
1372-
}
1373-
1374-
button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
1375-
transition: transform 0.1s ease-in-out;
1376-
transform: rotate(0deg);
1377-
}
1378-
.product-selector p {
1379-
font-size: 0.75rem;
1380-
color: oklch(var(--color-product-title));
1381-
display: inline;
1382-
}
1383-
1384-
.product-selector ul {
1385-
padding-inline-start: 0;
1386-
margin-block-start: 0;
1387-
list-style-type: none;
1388-
}
1389-
1390-
.product-selector a {
1391-
text-decoration: none;
1392-
color: oklch(var(--color-foreground));
1393-
font-size: 1rem;
1394-
}
1395-
13961401
/* MARK: Sidebar - Content
13971402
*/
13981403

@@ -1562,10 +1567,6 @@ details summary {
15621567
text-decoration: underline;
15631568
text-decoration-color: oklch(var(--color-brand) / 0.3);
15641569

1565-
& ~ * {
1566-
margin-block-start: 1rem;
1567-
}
1568-
15691570
&:hover {
15701571
text-decoration-color: oklch(var(--color-brand) / 0.8);
15711572
cursor: pointer;

‎layouts/partials/sidebar-v2.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,94 @@
66
{{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
77
</div>
88

9+
<!-- <div class="header__product-selector">
10+
{{ $nginxProducts := slice
11+
(dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
12+
(dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
13+
(dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
14+
(dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
15+
(dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
16+
(dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
17+
(dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
18+
(dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
19+
(dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
20+
(dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
21+
(dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
22+
}}
23+
{{ $productMap := dict }}
24+
{{ range $nginxProducts }}
25+
{{ if not (or (eq .title "NGINX Open Source" ) (eq .title "NGINX Unit")) }}
26+
{{ $productId := index (split .url "/") 1 }}
27+
{{ $productMap = merge $productMap (dict $productId .title) }}
28+
{{ end }}
29+
{{ end }}
30+
{{ $relPermalink := .RelPermalink }}
31+
{{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
32+
{{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}
933
34+
<button class="product-selector__button" id="product-selector-button">
35+
{{/* product name and selector */}}
36+
<span class="product-name">{{ $productName }}</span>
37+
<span class="product-selector-button-icon">
38+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
39+
<path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
40+
</svg>
41+
</span>
42+
</button>
43+
<div class="product-selector" id="product-selector" style="display: none">
44+
{{ $groupedProducts := dict
45+
"nginx-one" (where $nginxProducts "type" "nginx-one")
46+
"nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
47+
"nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
48+
"nginx-other" (where $nginxProducts "type" "nginx-other")
49+
}}
50+
{{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
51+
{{ range $orderedKeys }}
52+
{{ $type := . }}
53+
{{ $products := index $groupedProducts $type }}
54+
<div class="product-selector-content" id="product-selector-content">
55+
<p>{{ $type | humanize | title | upper }}</p>
56+
<ul>
57+
{{ range $products }}
58+
<li>
59+
<a href="{{ .url }}">{{ .title }}</a>
60+
</li>
61+
{{ end }}
62+
</ul>
63+
</div>
64+
{{ end }}
65+
</div>
66+
</div> -->
67+
68+
<div class="product-selector">
69+
<details class="product-selector__section">
70+
<summary class="product-selector__toggle">
71+
<span class="product-selector__toggle-text">NGINX One</span>
72+
<span class="product-selector__chevron">
73+
{{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
74+
</span>
75+
</summary>
76+
<div class="product-selector__content">
77+
{{ with index .Site.Data "product-selector" }}
78+
{{ $groups := sort . "order" }}
79+
{{ range $group := $groups }}
80+
<h3 class="product-selector__product-group">{{ upper (replace $group.productGroup "-" " ") }}</h3>
81+
<ul>
82+
{{ $products := sort $group.products "productOrder" }}
83+
{{ range $product := $products }}
84+
<li class="product-selector__product"><a href="{{ $product.url }}">{{ $product.title }}</a></li>
85+
{{ end }}
86+
</ul>
87+
{{ end }}
88+
{{ else }}
89+
90+
<p>Could not find the data.</p>
91+
{{ end }}
92+
</div>
93+
94+
</details>
95+
96+
</div>
1097

1198
</div>
1299
<div class="sidebar__content__wrapper">

0 commit comments

Comments
 (0)