Skip to content

Commit 79a57f7

Browse files
VheissuVheissu
committed
feat(ui): enhance mobile menu with smooth transitions
- Improved mobile menu visibility and animations using requestAnimationFrame for better performance. - Added touch event handling to prevent overscroll on iOS devices. - Updated layout styles for a more polished appearance, including gradient adjustments and icon transitions.
1 parent 6094738 commit 79a57f7

File tree

2 files changed

+65
-52
lines changed

2 files changed

+65
-52
lines changed

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

+46-17
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,39 @@ document.addEventListener('DOMContentLoaded', () => {
77
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
88
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
99

10-
// Toggle menu visibility
11-
mobileMenu.classList.toggle('hidden');
10+
// Use transform for better performance
11+
if (!isExpanded) {
12+
mobileMenu.classList.remove('hidden');
13+
// Use RAF to ensure the display change has taken effect
14+
requestAnimationFrame(() => {
15+
mobileMenu.classList.remove('translate-x-full');
16+
document.body.style.overflow = 'hidden';
17+
// Enable smooth scrolling on iOS
18+
mobileMenu.style.webkitOverflowScrolling = 'touch';
19+
});
20+
} else {
21+
mobileMenu.classList.add('translate-x-full');
22+
// Wait for transition to complete before hiding
23+
setTimeout(() => {
24+
mobileMenu.classList.add('hidden');
25+
document.body.style.overflow = '';
26+
}, 300);
27+
}
1228

13-
// Toggle icons
14-
document.getElementById('menu-closed-icon').classList.toggle('hidden');
15-
document.getElementById('menu-open-icon').classList.toggle('block');
16-
document.getElementById('menu-open-icon').classList.toggle('hidden');
17-
document.getElementById('menu-closed-icon').classList.toggle('block');
29+
// Toggle icons with transition
30+
const closedIcon = document.getElementById('menu-closed-icon');
31+
const openIcon = document.getElementById('menu-open-icon');
1832

19-
// Prevent body scroll but allow menu scroll
2033
if (!isExpanded) {
21-
document.body.style.overflow = 'hidden';
22-
// Enable touch scrolling on iOS
23-
mobileMenu.style.webkitOverflowScrolling = 'touch';
24-
// Ensure menu is scrollable
25-
mobileMenu.style.overflow = 'auto';
26-
mobileMenu.style.height = `calc(100vh - 4rem)`;
34+
closedIcon.style.transform = 'scale(0)';
35+
openIcon.style.transform = 'scale(1)';
2736
} else {
28-
document.body.style.overflow = '';
29-
mobileMenu.style.overflow = '';
30-
mobileMenu.style.webkitOverflowScrolling = '';
37+
closedIcon.style.transform = 'scale(1)';
38+
openIcon.style.transform = 'scale(0)';
3139
}
40+
41+
closedIcon.classList.toggle('hidden');
42+
openIcon.classList.toggle('hidden');
3243
}
3344

3445
if (mobileMenuButton) {
@@ -210,4 +221,22 @@ document.addEventListener('DOMContentLoaded', () => {
210221
// Initial check for active section
211222
updateActiveSection();
212223
});
224+
225+
// Add touch event handling for iOS
226+
let touchStartY = 0;
227+
mobileMenu.addEventListener('touchstart', (e) => {
228+
touchStartY = e.touches[0].clientY;
229+
}, { passive: true });
230+
231+
mobileMenu.addEventListener('touchmove', (e) => {
232+
const touchY = e.touches[0].clientY;
233+
const scrollTop = mobileMenu.scrollTop;
234+
const isAtTop = scrollTop <= 0;
235+
const isAtBottom = scrollTop + mobileMenu.offsetHeight >= mobileMenu.scrollHeight;
236+
237+
// Prevent overscroll only when at the boundaries
238+
if ((isAtTop && touchY > touchStartY) || (isAtBottom && touchY < touchStartY)) {
239+
e.preventDefault();
240+
}
241+
}, { passive: false });
213242
});

‎themes/aurelia-theme/layouts/index.html

+19-35
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,35 @@
44
<section class="relative pt-20 sm:pt-24 min-h-screen flex items-center justify-center bg-gradient-to-b from-white to-gray-50 overflow-hidden">
55
<div class="absolute inset-0 overflow-hidden">
66
<!-- Elegant flowing gradient mesh -->
7-
<div class="absolute inset-0 opacity-[0.08]">
8-
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(237,43,136,0.1),transparent_50%)] animate-pulse-slow"></div>
9-
<div class="absolute -inset-[100%] bg-[radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.1),transparent_50%)] animate-pulse-slower"></div>
7+
<div class="absolute inset-0 opacity-[0.12]">
8+
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(237,43,136,0.15),transparent_50%)] animate-pulse-slow"></div>
9+
<div class="absolute -inset-[100%] bg-[radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.15),transparent_50%)] animate-pulse-slower"></div>
10+
<div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(124,58,237,0.1),transparent_50%)] animate-pulse-slower-2"></div>
1011
</div>
1112

1213
<!-- Subtle dot matrix -->
1314
<div class="absolute inset-0">
14-
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(237,43,136,0.05)_1px,transparent_1px)] bg-[size:40px_40px]"></div>
15+
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(237,43,136,0.08)_1px,transparent_1px)] bg-[size:24px_24px]"></div>
1516
</div>
1617

1718
<!-- Floating elements -->
1819
<div class="absolute inset-0" aria-hidden="true">
19-
<!-- Minimal geometric shapes -->
20-
<div class="absolute top-1/4 right-1/4 w-64 h-64 rounded-full border border-aurelia/5 animate-float-slow"></div>
21-
<div class="absolute bottom-1/4 left-1/3 w-48 h-48 rounded-full border border-purple-500/5 animate-float-delayed"></div>
20+
<div class="absolute top-1/4 right-1/4 w-64 h-64 rounded-full border-2 border-aurelia/10 animate-float-slow"></div>
21+
<div class="absolute bottom-1/4 left-1/3 w-48 h-48 rounded-full border-2 border-purple-500/10 animate-float-delayed"></div>
22+
<div class="absolute top-1/2 right-1/3 w-32 h-32 rounded-full border border-pink-500/10 animate-float-delayed-2"></div>
2223

2324
<!-- Subtle accent elements -->
24-
<div class="absolute top-1/3 left-1/4 w-2 h-2 rounded-full bg-aurelia/10 animate-pulse"></div>
25-
<div class="absolute bottom-1/3 right-1/4 w-2 h-2 rounded-full bg-purple-500/10 animate-pulse-delayed"></div>
25+
<div class="absolute top-1/3 left-1/4 w-3 h-3 rounded-full bg-aurelia/20 animate-pulse blur-sm"></div>
26+
<div class="absolute bottom-1/3 right-1/4 w-3 h-3 rounded-full bg-purple-500/20 animate-pulse-delayed blur-sm"></div>
27+
<div class="absolute top-2/3 left-1/2 w-2 h-2 rounded-full bg-pink-500/20 animate-pulse-delayed-2 blur-sm"></div>
2628
</div>
2729
</div>
2830

2931
<!-- Hero Content -->
30-
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
32+
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
3133
<!-- Left Column: Content -->
3234
<div class="text-center lg:text-left lg:flex-1 max-w-xl pt-4 sm:pt-0">
33-
<!-- <div class="mb-4">
34-
<span class="inline-block px-4 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium">
35-
<span class="mr-2">🚀</span> v2.0 Now Available
36-
</span>
37-
</div> -->
38-
39-
<h1 class="text-4xl sm:text-6xl font-bold mb-6">
35+
<h1 class="text-4xl sm:text-6xl font-bold mb-8">
4036
{{ range $index, $line := .Params.tagline }}
4137
<span class="block bg-gradient-to-r from-aurelia via-aurelia-light to-purple-500 bg-clip-text text-transparent
4238
animate-gradient-x hover:animate-gradient-x-fast transition-all duration-300">
@@ -70,28 +66,13 @@ <h1 class="text-4xl sm:text-6xl font-bold mb-6">
7066
</span>
7167
</a>
7268
</div>
73-
74-
<!-- <div class="mt-8 flex flex-wrap gap-6 justify-center lg:justify-start text-sm">
75-
<div class="flex items-center gap-2">
76-
<div class="w-2 h-2 rounded-full bg-green-500"></div>
77-
<span class="text-gray-600">Lightweight</span>
78-
</div>
79-
<div class="flex items-center gap-2">
80-
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
81-
<span class="text-gray-600">TypeScript First</span>
82-
</div>
83-
<div class="flex items-center gap-2">
84-
<div class="w-2 h-2 rounded-full bg-purple-500"></div>
85-
<span class="text-gray-600">Standards Based</span>
86-
</div>
87-
</div> -->
8869
</div>
8970

9071
<!-- Right Column: Quick Start -->
9172
<div class="lg:flex-1 w-full max-w-xl lg:max-w-md">
9273
<div class="relative">
93-
<!-- Terminal Preview -->
94-
<div class="rounded-xl bg-gray-900 p-4 shadow-2xl transform hover:-translate-y-1 transition-transform">
74+
<div class="absolute inset-0 bg-gradient-to-r from-aurelia/20 to-purple-500/20 rounded-xl blur-xl transform -rotate-1"></div>
75+
<div class="rounded-xl bg-gray-900 p-4 shadow-2xl transform hover:-translate-y-1 transition-all duration-300 relative">
9576
<!-- Terminal Header -->
9677
<div class="flex items-center justify-between mb-4">
9778
<div class="flex items-center gap-1.5">
@@ -132,7 +113,10 @@ <h1 class="text-4xl sm:text-6xl font-bold mb-6">
132113

133114
<!-- Result Preview -->
134115
<div class="mt-6 text-center">
135-
<span class="text-sm text-gray-600">That's it! No CLI or global installs needed.</span>
116+
<span class="inline-flex items-center gap-2 text-sm text-gray-600">
117+
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
118+
That's it! No CLI or global installs needed.
119+
</span>
136120
</div>
137121
</div>
138122
</div>

0 commit comments

Comments
 (0)