Skip to content

Commit bac3733

Browse files
ParzivalPavlisParzivalPavlis
committed
feat: refactor navbar and sidebar for improved mobile navigation and accessibility
risk: low
1 parent 4505341 commit bac3733

File tree

3 files changed

+180
-151
lines changed

3 files changed

+180
-151
lines changed

‎docs/layouts/partials/navbar.html‎

Lines changed: 90 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,93 @@
1-
{{/* (C) 2023 GoodData Corporation */}}
2-
3-
{{ $cover := .HasShortcode "blocks/cover" }}
4-
<div class="gd-docs-header-nav gd-docs-header-nav__first">
5-
<nav class="gd-docs-header-nav__left" aria-label="Homepage">
6-
<a class="gd-docs-header-nav__logo gd-header-nav__logo" href="{{ (printf "%s%s/" .Site.Home.Permalink "latest" ) | safeURL }}" aria-label="Go to documentation homepage">
7-
{{ with resources.Get "icons/GoodDataLearn.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
8-
</a>
9-
<span class="gd-header-nav__logo-text">Learn</span>
10-
</nav>
11-
{{ partial "header-menu.html" . }}
12-
{{ partial "header-right.html" . }}
13-
</div>
14-
<div class="gd-docs-header-nav gd-docs-header-nav__second">
15-
<div class="gd-docs-header-nav__desktop">
16-
{{ partial "navbar-breadcrumb.html" . }}
17-
</div>
18-
<div class="gd-docs-header-nav__center">
19-
<div id="adds-container" class="gd-docs-header-nav__search"></div>
20-
</div>
21-
{{ if .Site.Params.versions }}
22-
<div class="gd-docs-header-nav__right">
23-
{{ partial "navbar-version-selector.html" . }}
24-
<a href="https://github.com/gooddata/gooddata-python-sdk" class="gd-docs-header-nav__cta gd-docs-header-nav__github">
25-
{{ with resources.Get "icons/github.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
26-
GitHub
27-
</a>
28-
</div>
1+
<!-- PETR: Menu assembled here -->
2+
<input type="checkbox" id="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-trigger" />
3+
<label for="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-icon"></label>
4+
<div class="gd-docs-menu__mobile-bg"></div>
5+
<nav id="gd-docs-menu" class="gd-docs-menu init" aria-label="Articles">
6+
{{ $additionalNavRoot := .Site.GetPage "/versions" }}
7+
{{ $root := .Site.GetPage "/docs" }}
8+
9+
{{ if or (eq .FirstSection $additionalNavRoot) (eq .FirstSection .Site.Home) }}
10+
{{- if .Site.Params.versions -}}
11+
{{- $root = index (where .Site.Sections "RelPermalink" (index .Site.Params.versions 0).url) 0 -}}
12+
{{- end -}}
2913
{{ else }}
30-
<div class="gd-docs-header-nav__right">
31-
{{ with .Site.GetPage "docs" }}
32-
<a href="https://github.com/gooddata/gooddata-python-sdk" class="gd-docs-header-nav__cta gd-docs-header-nav__github">
33-
{{ with resources.Get "icons/github.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
34-
GitHub
35-
</a>
14+
{{ $root = .FirstSection }}
15+
{{ end }}
16+
17+
{{ template "site-title" . }}
18+
19+
{{ template "root-link" (dict "currentPage" . "root" $root "site" .Site) }}
20+
{{ template "section-tree-nav-sections" (dict "root" $root.CurrentSection.Pages "currentPage" . "site" .Site) }}
21+
{{ template "section-tree-nav-sections" (dict "root" $additionalNavRoot.CurrentSection.Pages "currentPage" . "site" .Site) }}
22+
</nav>
23+
24+
{{ define "root-link" }}
25+
{{ $isCurrent := eq .currentPage .root.FirstSection }}
26+
{{ with .root }}
27+
<ul class="gd-docs-menu-section gd-docs-menu-section__root">
28+
<li class="gd-docs-menu-page{{ if $isCurrent }} active{{ end }}">
29+
<div class="gd-docs-menu-page__title">
30+
<a href="{{ .RelPermalink }}" class="gd-docs-menu-page__link">{{ .LinkTitle }}</a>
31+
</div>
32+
</li>
33+
</ul>
34+
{{ end }}
35+
{{ end }}
36+
37+
{{ define "section-tree-nav-sections" }}
38+
{{ $root := .root }}
39+
{{ $site := .site }}
40+
{{ $currentPage := .currentPage }}
41+
{{ $firstInSection := (index $root 0) }}
42+
{{ $isRootSection := eq $firstInSection.Parent .site.Home }}
43+
44+
{{ if gt (len (where $root.ByWeight "Params.toc_hide" "ne" true)) 0 }}
45+
46+
<ul class="gd-docs-menu-section{{ if .activeSection }} active{{ end }}">
47+
{{ range $page := $root.ByWeight }}
48+
{{ $page := $page.Page }}
49+
{{ $pageId := replace (replaceRE "^/|/$" "" $page.RelPermalink) "/" "_" }}
50+
51+
{{ if and (not (eq $page.Params.toc_hide true)) (not (eq $page $site.Home)) }}
52+
{{ $activePage := eq $page $currentPage }}
53+
{{ $activeSection := $currentPage.IsDescendant $page }}
54+
{{ $pageId := replace (replaceRE "^/|/$" "" $page.RelPermalink) "/" "_" }}
55+
56+
<li class="gd-docs-menu-page{{ if $activePage }} active{{ end }}{{ if $page.Params.navSeparator }} gd-docs-menu-page__separator{{ end }}">
57+
{{ if $page.Params.navigationLabel }}
58+
<span class="gd-docs-menu-page__label">{{ $page.LinkTitle }}</span>
59+
{{ else }}
60+
{{ if $page.Pages }}
61+
<input type="checkbox" id="gd-docs-menu-page__{{ $pageId }}" class="gd-docs-menu-page__toggle"{{ if $activeSection }} checked{{ end }} />
62+
{{ end }}
63+
64+
<div class="gd-docs-menu-page__title">
65+
{{ if $page.Params.externalLink }}
66+
<a href ="{{ $page.Params.externalLink }}" class="gd-docs-menu-page__link" target="_blank">{{ $page.LinkTitle }}</a>
67+
{{ else }}
68+
<a href ="{{ $page.Permalink }}" class="gd-docs-menu-page__link">{{ $page.LinkTitle }}</a>
69+
{{ end }}
70+
71+
{{ if $page.Pages }}
72+
<label for="gd-docs-menu-page__{{ $pageId }}" class="gd-docs-menu-page__chevron">
73+
{{ with resources.Get "icons/chevron-menu.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
74+
</label>
75+
{{ end }}
76+
</div>
77+
{{ end }}
78+
79+
{{ if $page.Pages }}
80+
{{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site) }}
81+
{{ end }}
82+
</li>
83+
{{ end }}
3684
{{ end }}
37-
</div>
85+
</ul>
86+
{{ end }}
87+
{{ end }}
88+
89+
{{ define "site-title" }}
90+
{{ if .Site.Params.menuTitle }}
91+
<h4>{{ .Site.Params.menuTitle }}</h4>
3892
{{ end }}
39-
</div>
93+
{{ end }}

‎docs/layouts/partials/sidebar-tree.html‎

Lines changed: 89 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,93 @@
1-
{{/* (C) 2023 GoodData Corporation */}}
2-
{{ $additionalNavRoot := .Site.GetPage "/versions" }}
3-
{{ $root := .Site.GetPage "/latest" }}
4-
5-
{{ if or (eq .FirstSection $additionalNavRoot) (eq .FirstSection .Site.Home) }}
6-
{{- if .Site.Params.versions -}}
7-
{{- $root = index (where .Site.Sections "RelPermalink" (index .Site.Params.versions 0).url) 0 -}}
8-
{{- end -}}
9-
{{ else }}
10-
{{ $root = .FirstSection }}
1+
<!-- PETR: Menu assembled here -->
2+
<input type="checkbox" id="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-trigger" />
3+
<label for="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-icon"></label>
4+
<div class="gd-docs-menu__mobile-bg"></div>
5+
<nav id="gd-docs-menu" class="gd-docs-menu init" aria-label="Articles">
6+
{{ $additionalNavRoot := .Site.GetPage "/versions" }}
7+
{{ $root := .Site.GetPage "/docs" }}
8+
9+
{{ if or (eq .FirstSection $additionalNavRoot) (eq .FirstSection .Site.Home) }}
10+
{{- if .Site.Params.versions -}}
11+
{{- $root = index (where .Site.Sections "RelPermalink" (index .Site.Params.versions 0).url) 0 -}}
12+
{{- end -}}
13+
{{ else }}
14+
{{ $root = .FirstSection }}
15+
{{ end }}
16+
17+
{{ template "site-title" . }}
18+
19+
{{ template "root-link" (dict "currentPage" . "root" $root "site" .Site) }}
20+
{{ template "section-tree-nav-sections" (dict "root" $root.CurrentSection.Pages "currentPage" . "site" .Site) }}
21+
{{ template "section-tree-nav-sections" (dict "root" $additionalNavRoot.CurrentSection.Pages "currentPage" . "site" .Site) }}
22+
</nav>
23+
24+
{{ define "root-link" }}
25+
{{ $isCurrent := eq .currentPage .root.FirstSection }}
26+
{{ with .root }}
27+
<ul class="gd-docs-menu-section gd-docs-menu-section__root">
28+
<li class="gd-docs-menu-page{{ if $isCurrent }} active{{ end }}">
29+
<div class="gd-docs-menu-page__title">
30+
<a href="{{ .RelPermalink }}" class="gd-docs-menu-page__link">{{ .LinkTitle }}</a>
31+
</div>
32+
</li>
33+
</ul>
34+
{{ end }}
1135
{{ end }}
1236

13-
<h4>Python SDK</h4>
37+
{{ define "section-tree-nav-sections" }}
38+
{{ $root := .root }}
39+
{{ $site := .site }}
40+
{{ $currentPage := .currentPage }}
41+
{{ $firstInSection := (index $root 0) }}
42+
{{ $isRootSection := eq $firstInSection.Parent .site.Home }}
43+
44+
{{ if gt (len (where $root.ByWeight "Params.toc_hide" "ne" true)) 0 }}
45+
46+
<ul class="gd-docs-menu-section{{ if .activeSection }} active{{ end }}">
47+
{{ range $page := $root.ByWeight }}
48+
{{ $page := $page.Page }}
49+
{{ $pageId := replace (replaceRE "^/|/$" "" $page.RelPermalink) "/" "_" }}
50+
51+
{{ if and (not (eq $page.Params.toc_hide true)) (not (eq $page $site.Home)) }}
52+
{{ $activePage := eq $page $currentPage }}
53+
{{ $activeSection := $currentPage.IsDescendant $page }}
54+
{{ $pageId := replace (replaceRE "^/|/$" "" $page.RelPermalink) "/" "_" }}
55+
56+
<li class="gd-docs-menu-page{{ if $activePage }} active{{ end }}{{ if $page.Params.navSeparator }} gd-docs-menu-page__separator{{ end }}">
57+
{{ if $page.Params.navigationLabel }}
58+
<span class="gd-docs-menu-page__label">{{ $page.LinkTitle }}</span>
59+
{{ else }}
60+
{{ if $page.Pages }}
61+
<input type="checkbox" id="gd-docs-menu-page__{{ $pageId }}" class="gd-docs-menu-page__toggle"{{ if $activeSection }} checked{{ end }} />
62+
{{ end }}
63+
64+
<div class="gd-docs-menu-page__title">
65+
{{ if $page.Params.externalLink }}
66+
<a href ="{{ $page.Params.externalLink }}" class="gd-docs-menu-page__link" target="_blank">{{ $page.LinkTitle }}</a>
67+
{{ else }}
68+
<a href ="{{ $page.Permalink }}" class="gd-docs-menu-page__link">{{ $page.LinkTitle }}</a>
69+
{{ end }}
70+
71+
{{ if $page.Pages }}
72+
<label for="gd-docs-menu-page__{{ $pageId }}" class="gd-docs-menu-page__chevron">
73+
{{ with resources.Get "icons/chevron-menu.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
74+
</label>
75+
{{ end }}
76+
</div>
77+
{{ end }}
78+
79+
{{ if $page.Pages }}
80+
{{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site) }}
81+
{{ end }}
82+
</li>
83+
{{ end }}
84+
{{ end }}
85+
</ul>
86+
{{ end }}
87+
{{ end }}
1488

15-
{{ template "root-link" (dict "currentPage" . "root" $root "site" .Site) }}
16-
{{ if $root.CurrentSection }}
17-
{{ template "section-tree-nav-sections" (dict "root" $root.CurrentSection.Pages "currentPage" . "site" .Site) }}
89+
{{ define "site-title" }}
90+
{{ if .Site.Params.menuTitle }}
91+
<h4>{{ .Site.Params.menuTitle }}</h4>
92+
{{ end }}
1893
{{ end }}
19-
{{ if $additionalNavRoot.CurrentSection }}
20-
{{ template "section-tree-nav-sections" (dict "root" $additionalNavRoot.CurrentSection.Pages "currentPage" . "site" .Site) }}
21-
{{ end }}

‎docs/layouts/partials/sidebar.html‎

Lines changed: 1 addition & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1 @@
1-
{{/* (C) 2023 GoodData Corporation */}}
2-
<button type="button" id="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-btn" aria-expanded="false" aria-controls="gd-docs-menu" aria-label="Toggle navigation menu">
3-
<span class="gd-docs-menu__mobile-icon" aria-hidden="true"></span>
4-
</button>
5-
<div class="gd-docs-menu__mobile-bg"></div>
6-
<nav id="gd-docs-menu" class="gd-docs-menu init" aria-label="Articles">
7-
{{/* <div class="sidebar-skip-links">
8-
<a href="#main-content" class="skip-link skip-link--sidebar">Skip to main content</a>
9-
</div> */}}
10-
11-
{{ if .Site.Params.versions }}
12-
{{ partial "navbar-version-selector.html" . }}
13-
{{ end }}
14-
15-
{{ partial "sidebar-tree.html" . }}
16-
</nav>
17-
18-
{{ define "root-link" }}
19-
{{ $isCurrent := eq .currentPage .root.FirstSection }}
20-
{{ $active := .active }}
21-
{{ with .root }}
22-
<ul class="gd-docs-menu-section gd-docs-menu-section__root">
23-
<li class="gd-docs-menu-page{{ if or $isCurrent $active }} active{{ end }}">
24-
<div class="gd-docs-menu-page__title">
25-
<a href="{{ .RelPermalink }}" class="gd-docs-menu-page__link">{{ .LinkTitle }}</a>
26-
</div>
27-
</li>
28-
</ul>
29-
{{ end }}
30-
{{ end }}
31-
32-
{{ define "section-tree-nav-sections" }}
33-
{{ $root := .root }}
34-
{{ $site := .site }}
35-
{{ $currentPage := .currentPage }}
36-
{{ $firstInSection := (index $root 0) }}
37-
{{ $isRootSection := eq $firstInSection.Parent .site.Home }}
38-
39-
{{ if gt (len (where $root.ByWeight "Params.toc_hide" "ne" true)) 0 }}
40-
41-
<ul class="gd-docs-menu-section{{ if .activeSection }} active{{ end }}">
42-
{{ range $page := $root.ByWeight }}
43-
{{ $page := $page.Page }}
44-
{{ $pageId := replace (replaceRE "^/|/$" "" $page.RelPermalink) "/" "_" }}
45-
46-
{{ if and (not (eq $page.Params.toc_hide true)) (not (eq $page $site.Home)) }}
47-
{{ $activePage := eq $page $currentPage }}
48-
{{ $activeSection := or $activePage ($currentPage.IsDescendant $page) }}
49-
{{ $pageId := replace (replaceRE "^/|/$" "" $page.RelPermalink) "/" "_" }}
50-
51-
<li class="gd-docs-menu-page{{ if $activePage }} active{{ end }}{{ if $page.Params.navSeparator }} gd-docs-menu-page__separator{{ end }}">
52-
{{ if $page.Params.navigationLabel }}
53-
<span class="gd-docs-menu-page__label">{{ $page.LinkTitle }}</span>
54-
{{ else }}
55-
<div class="gd-docs-menu-page__title">
56-
{{ if $page.Params.externalLink }}
57-
<a href="{{ $page.Params.externalLink }}" class="gd-docs-menu-page__link" target="_blank">{{ $page.LinkTitle }}</a>
58-
{{ else }}
59-
<a href="{{ $page.Permalink }}" class="gd-docs-menu-page__link">{{ $page.LinkTitle }}</a>
60-
{{ end }}
61-
62-
{{ if $page.Pages }}
63-
<button
64-
type="button"
65-
id="btn-{{ $pageId }}"
66-
class="gd-docs-menu-page__toggle-btn"
67-
aria-expanded="{{ if $activeSection }}true{{ else }}false{{ end }}"
68-
aria-controls="section-{{ $pageId }}"
69-
aria-label="{{ if $activeSection }}Collapse{{ else }}Expand{{ end }} {{ $page.LinkTitle }} section">
70-
<span class="gd-docs-menu-page__chevron">
71-
{{ with resources.Get "icons/chevron-menu.svg" }}
72-
{{ $svg := . | minify }}
73-
{{ $svg := replace $svg.Content "<svg " "<svg aria-hidden=\"true\" focusable=\"false\" " }}
74-
{{ $svg | safeHTML }}
75-
{{ end }}
76-
</span>
77-
</button>
78-
{{ end }}
79-
</div>
80-
81-
{{ if $page.Pages }}
82-
<div id="section-{{ $pageId }}" class="gd-docs-menu-section-wrapper{{ if $activeSection }} expanded{{ end }}">
83-
{{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site) }}
84-
</div>
85-
{{ end }}
86-
{{ end }}
87-
</li>
88-
89-
{{ if and $page.Params.navigationLabel $page.Pages }}
90-
<li class="gd-docs-menu-page">
91-
{{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site) }}
92-
</li>
93-
{{ end }}
94-
{{ end }}
95-
{{ end }}
96-
</ul>
97-
{{ end }}
98-
{{ end }}
1+
{{ partial "sidebar-tree.html" . }}

0 commit comments

Comments
 (0)