Skip to content

Commit 03070ff

Browse files
nginx-jacklamATnginx
nginx-jack
and
lamATnginx
authored
Collapsible sidebar (#292)
* Headers: Add border to breadcrumb for mobile * Headers: Set spacing to around * Sidebar: Add initial collapsible sidebar * Header: Sticky and add blur effect * Header: Add f5 logo instead of sites button * Header: Fix coveo search breaking page height * Revert "Header: Add f5 logo instead of sites button" This reverts commit a33f8ce. * Sidebar: Add fixed position for mobile view Move search to sidebar for mobile view * Coveo: Resolved issue with coveo not rendering on sidebar AND header * Coveo: Fixed issue with searchbar on search page * Sidebar: Make mobile sidebar full length --------- Co-authored-by: Lam Nguyen <la.nguyen@f5.com>
1 parent bb0c31a commit 03070ff

File tree

10 files changed

+240
-266
lines changed

10 files changed

+240
-266
lines changed

‎assets/css/v2/style.css

Lines changed: 163 additions & 110 deletions
Large diffs are not rendered by default.

‎assets/js/coveo.js

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ async function atomicCoveo() {
3636
/* Initialize the interfaces with credentials */
3737
const searchPageInterface = document.querySelector('#search-v2');
3838
const searchBarHeader = document.querySelector('#search-standalone-header');
39+
const searchBarSidebar = document.querySelector('#search-standalone-sidebar');
3940

4041
if (searchPageInterface) {
4142
await searchPageInterface.initialize({
@@ -53,21 +54,41 @@ async function atomicCoveo() {
5354
await searchPageInterface.executeFirstSearch();
5455
}
5556

56-
/* Initialize the header searchbar*/
57-
await searchBarHeader.initialize({
58-
accessToken: token,
59-
organizationId: org_id,
60-
analytics: { analyticsMode: 'legacy' },
61-
preprocessRequest: (request) => {
62-
const body = JSON.parse(request.body);
63-
body.q = `<@- ${body.q} -@>`;
64-
request.body = JSON.stringify(body);
57+
/* Initialize the header searchbar */
58+
if (searchBarHeader) {
59+
await searchBarHeader.initialize({
60+
accessToken: token,
61+
organizationId: org_id,
62+
analytics: { analyticsMode: 'legacy' },
63+
preprocessRequest: (request) => {
64+
const body = JSON.parse(request.body);
65+
body.q = `<@- ${body.q} -@>`;
66+
request.body = JSON.stringify(body);
6567

66-
return request;
67-
},
68-
});
68+
return request;
69+
},
70+
});
6971

70-
await searchBarHeader.executeFirstSearch();
72+
await searchBarHeader.executeFirstSearch();
73+
}
74+
75+
/* Initialize the sidebar searchbar */
76+
if (searchBarSidebar) {
77+
await searchBarSidebar.initialize({
78+
accessToken: token,
79+
organizationId: org_id,
80+
analytics: { analyticsMode: 'legacy' },
81+
preprocessRequest: (request) => {
82+
const body = JSON.parse(request.body);
83+
body.q = `<@- ${body.q} -@>`;
84+
request.body = JSON.stringify(body);
85+
86+
return request;
87+
},
88+
});
89+
90+
await searchBarSidebar.executeFirstSearch();
91+
}
7192
}
7293

7394
document.addEventListener('DOMContentLoaded', async () => {

‎layouts/_default/baseof.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
{{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
4242
{{ partial "universal-tag.html" . }}
4343
{{ end }}
44+
<input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
4445
<div class="grid-container">
4546
<aside class="sidebar">
4647
{{ partial "sidebar-v2.html" . }}

‎layouts/_default/list.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{ define "main" }}
22

3-
<main class="content content-has-toc" role="main">
3+
<main class="content " role="main">
44
<section class="main-layout">
55
<section id="maincontent" class="content-layout">
66
<div data-cms-edit="content" class="text-content list-page">

‎layouts/_default/single.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<main class="content">
44
<!-- Replace icons -->
55
{{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
6-
<main role="main">
6+
77

88
<section class="main-layout">
99
<section id="maincontent" class="content-layout">
@@ -34,7 +34,6 @@ <h1>{{ .Title }}</h1>
3434

3535
{{ partial "previous-next-links-in-section-with-title.html" . }}
3636

37-
</main>
3837
</section>
3938
</section>
4039
</main>

‎layouts/partials/coveo-atomic-search.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{{ $redirectionUrl := .redirectionUrl | default "/search.html" }}
2-
<atomic-search-interface id="search-standalone-header">
2+
{{ $id := .id | default "search-standalone-header"}}
3+
<atomic-search-interface id={{ $id }}>
34
<atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">
45
</atomic-search-box>
5-
</atomic-search-interface>
6+
</atomic-search-interface>

‎layouts/partials/coveo-legacy-search.html

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎layouts/partials/coveo-legacy.html

Lines changed: 0 additions & 98 deletions
This file was deleted.

‎layouts/partials/header.html

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
{{ define "header" }}
22
<div class="header-container">
3+
<div class="header__sidebar__panel">
4+
<label for="sidebar-panel">
5+
{{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
6+
</label>
7+
</div>
8+
9+
<div class="header__logo-small">
10+
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
11+
<img class="header__img" src="{{ "/images/icons/NGINX-product-icon.svg" | absURL }}" alt="NGINX Docs">
12+
</a>
13+
</div>
314

415
<div class="header__logo">
516
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
@@ -64,14 +75,12 @@
6475
</div>
6576
{{ end }}
6677
</div>
67-
68-
6978
</div>
7079

7180
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
7281
<div class="header__search">
7382
<!-- Standalone search box. -->
74-
{{ partial "coveo-atomic-search.html" }}
83+
{{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
7584
</div>
7685
{{ end }}
7786

‎layouts/partials/sidebar-v2.html

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,31 @@
1-
{{ $nginxProducts := slice
2-
(dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
3-
(dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
4-
(dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
5-
(dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
6-
(dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
7-
(dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
8-
(dict "title" "Subscription Licensing & Solutions" "url" "/solutions/" "type" "nginx-one")
9-
(dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
10-
(dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
11-
(dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
12-
(dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
13-
(dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
14-
}}
15-
{{ $productMap := dict }}
16-
{{ range $nginxProducts }}
17-
{{ $productId := index (split .url "/") 1 }}
18-
{{ $productMap = merge $productMap (dict $productId .title) }}
19-
{{ end }}
20-
{{ $relPermalink := .RelPermalink }}
21-
{{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
22-
{{ $productName := index $productMap $productIdentifier }}
231

242
<div class="sidebar__container">
253
<div class="sidebar__header">
26-
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
27-
<img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
28-
</a>
4+
<div>
5+
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
6+
<img class="sidebar__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
7+
</a>
8+
</div>
9+
<div class="sidebar__panel">
10+
<label for="sidebar-panel">
11+
{{ partial "lucide" (dict "context" . "icon" "panel-left-close") }}
12+
</label>
13+
</div>
2914
</div>
30-
<div class="sidebar__content">
31-
<a class="skip-link" href="#maincontent">Skip Navigation</a>
32-
{{ partial "sidebar-list.html" (dict
33-
"firstSection" .FirstSection
34-
"currentUrl" .Permalink
35-
"currentPage" .
36-
"idPrefix" ""
37-
) }}
15+
<div class="sidebar__content__wrapper">
16+
<div class="sidebar__search">
17+
<!-- Standalone search box. -->
18+
{{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
19+
</div>
20+
<div class="sidebar__content">
21+
<a class="skip-link" href="#maincontent">Skip Navigation</a>
22+
{{ partial "sidebar-list.html" (dict
23+
"firstSection" .FirstSection
24+
"currentUrl" .Permalink
25+
"currentPage" .
26+
"idPrefix" ""
27+
) }}
28+
</div>
3829
</div>
30+
3931
</div>

0 commit comments

Comments
 (0)