blob: 8ee657cf8da9a213a082c1741daf1b3b5a78313a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b">
<nav class="container mx-auto px-4 py-4 flex items-center justify-between">
<!-- Logo and Site Name -->
{{ $homeLink := "/" }}
{{ if eq .Lang "it" }}
{{ $homeLink = "/it/" }}
{{ end }}
<a href="{{ $homeLink }}" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
<img src="/images/lampD.png" alt="Logo" style="width: 40px; height: 40px; max-width: none;" class="flex-shrink-0">
<span class="hidden md:inline font-bold text-lg text-accent font-oxanium">danix.xyz</span>
</a>
<!-- Desktop menu (hidden on mobile) -->
<div class="hidden md:flex items-center gap-8">
{{ $currentPath := strings.TrimSuffix "/" .RelPermalink }}
{{ range .Site.Menus.main }}
{{ $menuPath := strings.TrimSuffix "/" .URL }}
{{ $isActive := eq $menuPath $currentPath }}
{{ $isExternal := .Params.external }}
{{ if .HasChildren }}
{{/* CSS-only hover/focus popup. No ARIA menu roles: we do not
implement arrow-key menu semantics, so claiming role="menu"
would lie to AT. focus-within gives keyboard reveal; the
parent stays a plain navigable link. */}}
<div class="relative group">
<a
href="{{ .URL }}"
class="text-sm transition-colors inline-flex items-center gap-1 rounded focus:outline-none focus:ring-2 focus:ring-accent {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
{{ if $isActive }}aria-current="page"{{ end }}
>
{{ i18n .Name }}
<i data-feather="chevron-down" class="w-3 h-3" aria-hidden="true"></i>
</a>
<!-- Submenu: padding-top bridges the hover gap -->
<div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 hidden group-hover:flex group-focus-within:flex">
<ul class="frosted-bar border border-border rounded-lg px-4 py-3 flex flex-col gap-2 min-w-max shadow-lg">
{{ range .Children }}
{{ $childExternal := .Params.external }}
<li>
<a
href="{{ .URL }}"
class="block text-sm whitespace-nowrap hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent"
{{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }}
>
{{ if $childExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }}
</a>
</li>
{{ end }}
</ul>
</div>
</div>
{{ else }}
<a
href="{{ .URL }}"
class="text-sm transition-colors {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
{{ if $isActive }}aria-current="page"{{ end }}
{{ if $isExternal }}target="_blank" rel="noopener noreferrer"{{ end }}
>
{{ if $isExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }}
</a>
{{ end }}
{{ end }}
</div>
<!-- Right side controls: Search, Language, Theme, Menu -->
<div class="flex items-center gap-4 md:gap-6">
<!-- Search button (desktop only) -->
<button
x-data
@click="$dispatch('open-search')"
aria-label="{{ i18n "searchArticles" }}"
class="hidden md:flex p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
>
<i data-feather="search" class="w-5 h-5" aria-hidden="true"></i>
</button>
<!-- Language switcher (desktop) -->
<div class="hidden md:flex gap-2">
{{ $currentLang := .Page.Language }}
{{ $currentPath := .RelPermalink }}
{{ range site.Languages }}
{{ $langCode := .Lang }}
{{ $langName := .LanguageName }}
{{ $current := eq $langCode $currentLang }}
<!-- Build the translated URL by replacing language prefix -->
{{ $url := $currentPath }}
{{ if eq $langCode "en" }}
{{ if hasPrefix $currentPath "/it/" }}
{{ $url = strings.TrimPrefix "/it" $currentPath }}
{{ end }}
{{ else }}
{{ if not (hasPrefix $currentPath "/it/") }}
{{ $url = printf "/it%s" $currentPath }}
{{ end }}
{{ end }}
<a
href="{{ $url }}"
class="px-2 py-1 text-sm rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}hover:bg-surface{{ end }}"
>
{{ $langName }}
</a>
{{ end }}
</div>
<!-- Theme toggle button -->
<button
id="theme-toggle"
aria-label="{{ i18n "toggleTheme" }}"
class="p-2 rounded hover:bg-surface transition-colors"
>
<i id="theme-icon-sun" data-feather="sun" class="w-5 h-5" aria-hidden="true"></i>
<i id="theme-icon-moon" data-feather="moon" class="w-5 h-5" aria-hidden="true"></i>
</button>
<!-- Hamburger menu button (mobile only) -->
<button
x-data
@click="$dispatch('toggle-menu')"
aria-label="{{ i18n "toggleMenu" }}"
aria-controls="hamburger-menu"
class="md:hidden p-2 rounded hover:bg-surface transition-colors"
>
<i data-feather="menu" class="w-5 h-5"></i>
</button>
</div>
</nav>
<!-- Mobile hamburger overlay menu -->
{{ partial "hamburger-menu.html" . }}
</header>
|
