jalil/aspireves.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Menu mobile en plein écran

Browse source
This commit is contained in:
Jalil Arfaoui 2026-03-05 21:33:54 +01:00
parent 4a138d08eb
commit d873da0ca5
1 changed files with 29 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/Navbar.astro
View file

@ -69,36 +69,45 @@ function isActive(href: string): boolean {
class="text-night p-2 focus:outline-none"
aria-label="Menu"
>
<Icon name="lucide:menu" size={24} id="icon-menu" />
<Icon name="lucide:x" size={24} id="icon-close" class="hidden" />
<Icon name="lucide:menu" size={24} />
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<!-- Mobile Menu (fullscreen) -->
<div
id="mobile-menu"
class="md:hidden absolute top-full left-0 w-full bg-white/95 backdrop-blur-xl shadow-2xl border-t border-night/5 hidden animate-slide-down"
class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden"
>
<div class="px-6 py-8 space-y-2">
<div class="flex flex-col items-center justify-center h-full px-6 space-y-4">
<!-- Close button -->
<button
id="mobile-menu-close"
class="absolute top-8 right-6 text-night p-2 focus:outline-none"
aria-label="Fermer le menu"
>
<Icon name="lucide:x" size={28} />
</button>
{navLinks.map((link) => (
<a
href={link.href}
class:list={[
'block w-full text-left px-4 py-4 text-lg font-display tracking-wide rounded-2xl transition-all',
isActive(link.href) ? 'text-dream-coral bg-dream-coral/5 font-bold' : 'text-night/70 hover:bg-night/5',
'text-2xl font-display tracking-wide transition-all px-6 py-3 rounded-2xl',
isActive(link.href) ? 'text-dream-coral font-bold' : 'text-night/70 hover:text-night',
]}
>
{link.label}
</a>
))}
<div class="flex gap-6 px-4 pt-8 border-t border-night/5">
<div class="flex gap-8 pt-8 border-t border-night/10 mt-4">
<a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-pink transition-colors">
<Icon name="lucide:instagram" size={24} />
<Icon name="lucide:instagram" size={28} />
</a>
<a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-blue transition-colors">
<Icon name="lucide:facebook" size={24} />
<Icon name="lucide:facebook" size={28} />
</a>
</div>
</div>
@ -109,8 +118,7 @@ function isActive(href: string): boolean {
const navbar = document.getElementById('navbar')!;
const menuBtn = document.getElementById('mobile-menu-btn')!;
const mobileMenu = document.getElementById('mobile-menu')!;
const iconMenu = document.getElementById('icon-menu')!;
const iconClose = document.getElementById('icon-close')!;
const menuClose = document.getElementById('mobile-menu-close')!;
// Scroll detection
window.addEventListener('scroll', () => {
@ -123,17 +131,15 @@ function isActive(href: string): boolean {
}
});
// Mobile menu toggle
// Open mobile menu
menuBtn.addEventListener('click', () => {
const isOpen = !mobileMenu.classList.contains('hidden');
if (isOpen) {
mobileMenu.classList.add('hidden');
iconMenu.classList.remove('hidden');
iconClose.classList.add('hidden');
} else {
mobileMenu.classList.remove('hidden');
iconMenu.classList.add('hidden');
iconClose.classList.remove('hidden');
}
mobileMenu.classList.remove('hidden');
document.body.style.overflow = 'hidden';
});
// Close mobile menu
menuClose.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
document.body.style.overflow = '';
});
</script>