Skip to content

Commit b91c2fe

Browse files
tobihagemanntobihagemann
committed
refactored navbar
1 parent 0d77cea commit b91c2fe

File tree

6 files changed

+79
-90
lines changed

6 files changed

+79
-90
lines changed

‎content/for-individuals.de.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
22
title: "Cryptomator"
33
type: for-individuals
4+
5+
navbadge: "Für Einzelnutzer"
46
---

‎content/for-individuals.en.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
22
title: "Cryptomator"
33
type: for-individuals
4+
5+
navbadge: "For Individuals"
46
---

‎content/for-teams.de.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@
22
title: "Cryptomator Hub"
33
type: for-teams
44
aliases: ["/de/hub"]
5+
6+
navbadge: "Für Teams"
57
---

‎content/for-teams.en.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@
22
title: "Cryptomator Hub"
33
type: for-teams
44
aliases: ["/hub"]
5+
6+
navbadge: "For Teams"
57
---

‎data/nav.yaml‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
RelLinks: ["/pricing", "/blog"]
2-
ProductsRelLinks: ["/for-individuals", "/for-teams", "/downloads"]
3-
SupportUsRelLinks: ["/supporter-cert", "/donate", "/sponsors"]
4-
LearnMoreRelLinks: ["/open-source", "/encrypt-dropbox", "/boxcryptor-alternative", "/coop", "/enterprise", "/gdpr", "/nis-2-guideline", "/protecting-data-against-ai"]
1+
- Title: nav_products
2+
Children: ["/for-individuals", "/for-teams", "|", "/downloads"]
3+
- URL: "/pricing"
4+
- URL: "/blog"
5+
- Title: nav_support_us
6+
Children: ["/supporter-cert", "/donate", "/sponsors"]
7+
- Title: nav_learn_more
8+
Children: ["/open-source", "/encrypt-dropbox", "/boxcryptor-alternative", "/coop", "/enterprise", "/gdpr", "/nis-2-guideline", "/protecting-data-against-ai"]

‎layouts/partials/nav.html‎

Lines changed: 63 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{{- $textColor := cond .IsHome "text-white" "text-primary" -}}
22
{{- $borderColor := cond .IsHome "border-white" "border-primary" -}}
3+
{{- $hoverBorderColor := cond .IsHome "hover:border-white" "hover:border-primary" -}}
34
{{- $backgroundColor := cond .IsHome "bg-dark" "bg-white" -}}
45
{{- $currentRelPermalink := .RelPermalink -}}
56
<nav class="w-full max-h-screen {{ $textColor }} fixed {{ $backgroundColor }} shadow-sm z-50">
@@ -18,59 +19,49 @@
1819
</a>
1920

2021
<ul class="hidden lg:flex items-stretch list-none m-0">
21-
<li x-data="{ isProductsDropdownOpen: false }" class="flex items-center mx-2 border-b-2 border-transparent">
22-
<button @click="isProductsDropdownOpen = !isProductsDropdownOpen" class="whitespace-nowrap p-2">
23-
<span>{{ i18n "nav_products" . }}</span>
22+
{{- range .Site.Data.nav }}
23+
{{- if .Title }}
24+
<!-- Dropdown item -->
25+
<li x-data="{ isDropdownOpen: false, openedByHover: false }" class="flex items-center mx-2 border-b-2 border-transparent" @mouseenter="isDropdownOpen = true; openedByHover = true" @mouseleave="isDropdownOpen = false; openedByHover = false" @click.outside="isDropdownOpen = false">
26+
<button @click="if (!openedByHover) { isDropdownOpen = !isDropdownOpen }" class="whitespace-nowrap p-2">
27+
<span>{{ i18n .Title . }}</span>
2428
<i class="fas fa-chevron-down fa-fw text-xs"></i>
2529
</button>
2630
<div class="absolute">
27-
<div x-show="isProductsDropdownOpen" @click.outside="isProductsDropdownOpen = false" x-cloak class="absolute mt-6 py-2 w-64 bg-white rounded-sm shadow-md z-50">
28-
{{- range .Site.Data.nav.ProductsRelLinks }}
31+
<ul x-show="isDropdownOpen" x-cloak class="absolute mt-6 py-2 whitespace-nowrap bg-white rounded-sm shadow-md z-50">
32+
{{- range .Children }}
33+
{{- if eq . "|" }}
34+
<li>
35+
<hr class="border-gray-200 my-2"/>
36+
</li>
37+
{{- else }}
2938
{{- with $.Site.GetPage . }}
30-
<a href="{{ .RelPermalink }}" class="block px-4 py-2 text-gray-800 hover:bg-secondary hover:text-white hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
31-
{{- end}}
39+
<li>
40+
<a href="{{ .RelPermalink }}" class="flex items-center px-4 py-2 text-gray-800 hover:bg-secondary hover:text-white hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">
41+
<span>{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</span>
42+
{{- if .Params.Navbadge }}
43+
<span class="inline-flex px-2 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-primary-l2 text-dark ml-2">{{ .Params.Navbadge }}</span>
44+
{{- end }}
45+
</a>
46+
</li>
3247
{{- end }}
33-
</div>
48+
{{- end }}
49+
{{- end }}
50+
</ul>
3451
</div>
3552
</li>
36-
{{- range .Site.Data.nav.RelLinks }}
37-
{{- with $.Site.GetPage . }}
53+
{{- else if .URL }}
54+
<!-- Direct link -->
55+
{{- with $.Site.GetPage .URL }}
3856
{{- $navItemBorderColor := cond (hasPrefix $currentRelPermalink .RelPermalink) $borderColor "border-transparent" }}
39-
<li class="flex items-center mx-2 border-b-2 {{ $navItemBorderColor }} hover:{{ $borderColor }}">
40-
<a class="p-2 hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
57+
<li class="flex items-center mx-2 border-b-2 {{ $navItemBorderColor }} {{ $hoverBorderColor }}">
58+
<a class="p-2 hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">
59+
{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}
60+
</a>
4161
</li>
4262
{{- end }}
4363
{{- end }}
44-
<li x-data="{ isSupportUsDropdownOpen: false }" class="flex items-center mx-2 border-b-2 border-transparent">
45-
<button @click="isSupportUsDropdownOpen = !isSupportUsDropdownOpen" class="whitespace-nowrap p-2">
46-
<span>{{ i18n "nav_support_us" . }}</span>
47-
<i class="fas fa-chevron-down fa-fw text-xs"></i>
48-
</button>
49-
<div class="absolute">
50-
<div x-show="isSupportUsDropdownOpen" @click.outside="isSupportUsDropdownOpen = false" x-cloak class="absolute mt-6 py-2 w-64 bg-white rounded-sm shadow-md z-50">
51-
{{- range .Site.Data.nav.SupportUsRelLinks }}
52-
{{- with $.Site.GetPage . }}
53-
<a href="{{ .RelPermalink }}" class="block px-4 py-2 text-gray-800 hover:bg-secondary hover:text-white hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
54-
{{- end}}
55-
{{- end }}
56-
</div>
57-
</div>
58-
</li>
59-
<li x-data="{ isLearnMoreDropdownOpen: false }" class="flex items-center mx-2 border-b-2 border-transparent">
60-
<button @click="isLearnMoreDropdownOpen = !isLearnMoreDropdownOpen" class="whitespace-nowrap p-2">
61-
<span>{{ i18n "nav_learn_more" . }}</span>
62-
<i class="fas fa-chevron-down fa-fw text-xs"></i>
63-
</button>
64-
<div class="absolute">
65-
<div x-show="isLearnMoreDropdownOpen" @click.outside="isLearnMoreDropdownOpen = false" x-cloak class="absolute mt-6 py-2 w-96 bg-white rounded-sm shadow-md z-50">
66-
{{- range .Site.Data.nav.LearnMoreRelLinks }}
67-
{{- with $.Site.GetPage . }}
68-
<a href="{{ .RelPermalink }}" class="block px-4 py-2 text-gray-800 hover:bg-secondary hover:text-white hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
69-
{{- end}}
70-
{{- end }}
71-
</div>
72-
</div>
73-
</li>
64+
{{- end }}
7465
</ul>
7566
</div>
7667

@@ -94,18 +85,19 @@
9485

9586
<ul class="hidden lg:flex items-stretch list-none m-0">
9687
<li class="flex items-center m-3 border-l {{ $borderColor }}"></li>
97-
98-
<li x-data="{ isLangDropdownOpen: false }" class="flex items-center mx-2">
99-
<button @click="isLangDropdownOpen = !isLangDropdownOpen" class="whitespace-nowrap p-2">
88+
<li x-data="{ isDropdownOpen: false, openedByHover: false }" class="flex items-center mx-2" @mouseenter="isDropdownOpen = true; openedByHover = true" @mouseleave="isDropdownOpen = false; openedByHover = false" @click.outside="isDropdownOpen = false">
89+
<button @click="if (!openedByHover) { isDropdownOpen = !isDropdownOpen }" class="whitespace-nowrap p-2">
10090
<span>{{ .Site.Language.Lang | upper }}</span>
10191
<i class="fas fa-chevron-down fa-fw text-xs"></i>
10292
</button>
10393
<div class="relative">
104-
<div x-show="isLangDropdownOpen" @click.outside="isLangDropdownOpen = false" x-cloak class="absolute right-0 mt-6 py-2 w-48 bg-white rounded-sm shadow-md z-50">
94+
<ul x-show="isDropdownOpen" x-cloak class="absolute right-0 mt-6 py-2 w-48 bg-white rounded-sm shadow-md z-50">
10595
{{- range .Translations }}
106-
<a :href="'{{ .RelPermalink }}' + (window.location.search ?? '')" lang="{{ .Lang }}" class="block px-4 py-2 text-gray-800 hover:bg-secondary hover:text-white hover:no-underline plausible-event-name=nav-lang-{{ .Lang }}" data-umami-event="nav-lang-{{ .Lang }}">{{ .Language.LanguageName }}</a>
96+
<li>
97+
<a :href="'{{ .RelPermalink }}' + (window.location.search ?? '')" lang="{{ .Lang }}" class="block px-4 py-2 text-gray-800 hover:bg-secondary hover:text-white hover:no-underline plausible-event-name=nav-lang-{{ .Lang }}" data-umami-event="nav-lang-{{ .Lang }}">{{ .Language.LanguageName }}</a>
98+
</li>
10799
{{- end }}
108-
</div>
100+
</ul>
109101
</div>
110102
</li>
111103
</ul>
@@ -114,53 +106,38 @@
114106

115107
<!-- Smartphone Navigation -->
116108
<div :class="isNavOpen ? 'block' : 'hidden'" x-cloak class="lg:hidden max-h-[calc(100vh-48px)] overflow-y-auto">
109+
{{- range .Site.Data.nav }}
110+
{{- if .Title }}
117111
<div class="uppercase tracking-wide text-gray-500 text-xs font-bold p-2">
118-
{{ i18n "nav_products" . }}
112+
{{ i18n .Title . }}
119113
</div>
120-
<div class="mt-1">
121-
{{- range .Site.Data.nav.ProductsRelLinks }}
122-
{{- with $.Site.GetPage . }}
123-
<a class="block py-2 mx-2 hover:text-secondary hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
124-
{{- end }}
125-
{{- end }}
126-
</div>
127-
114+
{{- range .Children }}
115+
{{- if eq . "|" }}
128116
<hr class="border-primary my-2"/>
129-
130-
{{- range .Site.Data.nav.RelLinks }}
117+
{{- else }}
131118
{{- with $.Site.GetPage . }}
132-
<a class="block py-2 mx-2 hover:text-secondary hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
119+
<a class="block py-2 mx-2 hover:text-secondary hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}"
120+
href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">
121+
<span>{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</span>
122+
{{- if .Params.Navbadge }}
123+
<span class="inline-flex px-2 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-primary-l2 text-dark ml-2">{{ .Params.Navbadge }}</span>
124+
{{- end }}
125+
</a>
126+
{{- end }}
133127
{{- end }}
134128
{{- end }}
135-
136129
<hr class="border-primary my-2"/>
137-
138-
<div class="uppercase tracking-wide text-gray-500 text-xs font-bold p-2">
139-
{{ i18n "nav_support_us" . }}
140-
</div>
141-
<div class="mt-1">
142-
{{- range .Site.Data.nav.SupportUsRelLinks }}
143-
{{- with $.Site.GetPage . }}
144-
<a class="block py-2 mx-2 hover:text-secondary hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
145-
{{- end }}
146-
{{- end }}
147-
</div>
148-
130+
{{- else if .URL }}
131+
{{- with $.Site.GetPage .URL }}
132+
<a class="block py-2 mx-2 hover:text-secondary hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}"
133+
href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">
134+
{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}
135+
</a>
149136
<hr class="border-primary my-2"/>
137+
{{- end }}
138+
{{- end }}
139+
{{- end }}
150140

151-
<div class="uppercase tracking-wide text-gray-500 text-xs font-bold p-2">
152-
{{ i18n "nav_learn_more" . }}
153-
</div>
154-
<div class="mt-1">
155-
{{- range .Site.Data.nav.LearnMoreRelLinks }}
156-
{{- with $.Site.GetPage . }}
157-
<a class="block py-2 mx-2 hover:text-secondary hover:no-underline plausible-event-name=nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}" href="{{ .RelPermalink }}" data-umami-event="nav-{{ replaceRE "^.*/([^/]+)/?$" "$1" .RelPermalink }}">{{ cond (isset .Params "navtitle") .Params.Navtitle .Title }}</a>
158-
{{- end }}
159-
{{- end }}
160-
</div>
161-
162-
<hr class="border-primary my-2"/>
163-
164141
<div class="uppercase tracking-wide text-gray-500 text-xs font-bold p-2">
165142
<i class="fas fa-globe fa-fw"></i> {{ .Site.Language.Lang | upper }}
166143
</div>

0 commit comments

Comments
 (0)