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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<div
id="menu-overlay"
class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-300 z-40"
aria-hidden="true"
>
<div
id="hamburger-menu"
class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform translate-x-full transition-transform duration-300 z-50"
>
<!-- Close button -->
<div class="flex items-center justify-between p-6 border-b border-border">
<span class="font-bold text-lg text-accent font-oxanium">Menu</span>
<button
id="menu-close"
aria-label="{{ i18n "closeMenu" }}"
class="p-2 hover:bg-surface rounded transition-colors"
>
<i data-feather="x" class="w-5 h-5"></i>
</button>
</div>
<!-- Menu items -->
<nav class="p-6">
{{ range .Site.Menus.main }}
<a
href="{{ .URL }}"
class="block py-4 text-lg font-medium hover:text-accent transition-colors border-b border-border/30"
>
{{ i18n .Name }}
</a>
{{ end }}
</nav>
<!-- Language switcher -->
<div class="p-6">
<div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div>
<div class="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="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
>
{{ $langName }}
</a>
{{ end }}
</div>
</div>
</div>
</div>
<script>
function initializeHamburgerMenu() {
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const menuOverlay = document.getElementById('menu-overlay');
const hamburgerMenu = document.getElementById('hamburger-menu');
if (!menuToggle || !menuOverlay || !hamburgerMenu) {
console.warn('Hamburger menu elements not found', {
menuToggle: !!menuToggle,
menuOverlay: !!menuOverlay,
hamburgerMenu: !!hamburgerMenu
});
return;
}
const openMenu = () => {
menuOverlay.classList.remove('opacity-0', 'invisible');
hamburgerMenu.classList.remove('translate-x-full');
menuOverlay.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
menuToggle.setAttribute('aria-expanded', 'true');
};
const closeMenu = () => {
menuOverlay.classList.add('opacity-0', 'invisible');
hamburgerMenu.classList.add('translate-x-full');
menuOverlay.setAttribute('aria-hidden', 'true');
document.body.style.overflow = '';
menuToggle.setAttribute('aria-expanded', 'false');
};
// Toggle button click
menuToggle.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (menuOverlay.classList.contains('opacity-0')) {
openMenu();
} else {
closeMenu();
}
});
// Close button click
if (menuClose) {
menuClose.addEventListener('click', (e) => {
e.preventDefault();
closeMenu();
});
}
// Close on ESC key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !menuOverlay.classList.contains('opacity-0')) {
closeMenu();
}
});
// Close when clicking menu links
const menuLinks = hamburgerMenu.querySelectorAll('a');
menuLinks.forEach(link => {
link.addEventListener('click', (e) => {
closeMenu();
});
});
// Close when clicking the overlay (but not the menu panel)
menuOverlay.addEventListener('click', (e) => {
if (e.target === menuOverlay) {
closeMenu();
}
});
}
// Run when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeHamburgerMenu);
} else {
initializeHamburgerMenu();
}
</script>
|
