Skip to content

Commit ed74530

Browse files
VheissuVheissu
committed
chore(header): add mobile menu functionality
Implemented a toggle function for the mobile menu, allowing it to open and close with button clicks. Added event listeners to close the menu when clicking outside of it or pressing the Escape key. Updated header layout to include a mobile menu button and icons for open/closed states.
1 parent 1c8b192 commit ed74530

File tree

3 files changed

+88
-9
lines changed

3 files changed

+88
-9
lines changed

‎themes/aurelia-theme/assets/js/main.js

+41
Original file line numberDiff line numberDiff line change
@@ -1 +1,42 @@
11
console.log('This site was generated by Hugo.');
2+
3+
document.addEventListener('DOMContentLoaded', () => {
4+
// Mobile menu functionality
5+
const mobileMenuButton = document.getElementById('mobile-menu-button');
6+
if (mobileMenuButton) {
7+
mobileMenuButton.addEventListener('click', toggleMobileMenu);
8+
}
9+
10+
function toggleMobileMenu() {
11+
const menu = document.getElementById('mobile-menu');
12+
const button = document.getElementById('mobile-menu-button');
13+
const closedIcon = document.getElementById('menu-closed-icon');
14+
const openIcon = document.getElementById('menu-open-icon');
15+
16+
const isExpanded = button.getAttribute('aria-expanded') === 'true';
17+
18+
button.setAttribute('aria-expanded', !isExpanded);
19+
menu.classList.toggle('hidden');
20+
closedIcon.classList.toggle('hidden');
21+
openIcon.classList.toggle('block');
22+
openIcon.classList.toggle('hidden');
23+
closedIcon.classList.toggle('block');
24+
}
25+
26+
// Close mobile menu when clicking outside
27+
document.addEventListener('click', (event) => {
28+
const menu = document.getElementById('mobile-menu');
29+
const button = document.getElementById('mobile-menu-button');
30+
31+
if (!menu.contains(event.target) && !button.contains(event.target) && !menu.classList.contains('hidden')) {
32+
toggleMobileMenu();
33+
}
34+
});
35+
36+
// Close mobile menu when pressing Escape key
37+
document.addEventListener('keydown', (event) => {
38+
if (event.key === 'Escape' && !document.getElementById('mobile-menu').classList.contains('hidden')) {
39+
toggleMobileMenu();
40+
}
41+
});
42+
});

‎themes/aurelia-theme/layouts/partials/head.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
77

88
<meta name="msapplication-tap-highlight" content="no" />
9-
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="mobile-web-app-capable" content="yes">
1010

1111
<meta name="description" content="Aurelia is a JavaScript client framework for web, mobile and desktop that leverages simple conventions to empower your creativity."/>
1212
<meta name="robots" content="index,follow"/>

‎themes/aurelia-theme/layouts/partials/header.html

+46-8
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<img src="{{ "logo.svg" | relURL }}" class="logo" width="124" height="36" alt="Aurelia">
66
</a>
77

8+
<!-- Desktop Menu -->
89
<div class="hidden md:flex space-x-8">
910
{{ range .Site.Data.header.menu }}
1011
{{ $link := .link }}
@@ -20,14 +21,51 @@
2021
{{ end }}
2122
</div>
2223

23-
<button onclick="openSearch()"
24-
class="p-2 rounded-full hover:bg-gray-100 text-gray-500 hover:text-aurelia transition-all"
25-
aria-label="Search">
26-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
27-
<circle cx="11" cy="11" r="8"></circle>
28-
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
29-
</svg>
30-
</button>
24+
<div class="flex items-center space-x-4">
25+
<button onclick="openSearch()"
26+
class="p-2 rounded-full hover:bg-gray-100 text-gray-500 hover:text-aurelia transition-all"
27+
aria-label="Search">
28+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
29+
<circle cx="11" cy="11" r="8"></circle>
30+
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
31+
</svg>
32+
</button>
33+
34+
<!-- Mobile Menu Button -->
35+
<button type="button"
36+
class="md:hidden p-2 rounded-full hover:bg-gray-100 text-gray-500 hover:text-aurelia transition-all"
37+
aria-controls="mobile-menu"
38+
aria-expanded="false"
39+
id="mobile-menu-button">
40+
<span class="sr-only">Open main menu</span>
41+
<!-- Icon when menu is closed -->
42+
<svg class="block h-6 w-6" id="menu-closed-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
43+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
44+
</svg>
45+
<!-- Icon when menu is open -->
46+
<svg class="hidden h-6 w-6" id="menu-open-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
47+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
48+
</svg>
49+
</button>
50+
</div>
51+
</div>
52+
53+
<!-- Mobile Menu -->
54+
<div class="hidden md:hidden" id="mobile-menu">
55+
<div class="px-2 pt-2 pb-3 space-y-1">
56+
{{ range .Site.Data.header.menu }}
57+
{{ $link := .link }}
58+
{{ if not (hasPrefix .link "http") }}
59+
{{ $link = printf "%s%s" $.Site.Params.pathPrefix .link }}
60+
{{ end }}
61+
62+
<a href="{{ $link }}"
63+
{{ if .target }}target="{{ .target }}"{{ end }}
64+
class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-aurelia hover:bg-gray-50 transition-colors">
65+
{{ .name }}
66+
</a>
67+
{{ end }}
68+
</div>
3169
</div>
3270
</div>
3371
</nav>

0 commit comments

Comments
 (0)