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" class="text-night p-2 focus:outline-none"
aria-label="Menu" aria-label="Menu"
> >
<Icon name="lucide:menu" size={24} id="icon-menu" /> <Icon name="lucide:menu" size={24} />
<Icon name="lucide:x" size={24} id="icon-close" class="hidden" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- Mobile Menu --> <!-- Mobile Menu (fullscreen) -->
<div <div
id="mobile-menu" 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) => ( {navLinks.map((link) => (
<a <a
href={link.href} href={link.href}
class:list={[ class:list={[
'block w-full text-left px-4 py-4 text-lg font-display tracking-wide rounded-2xl transition-all', 'text-2xl font-display tracking-wide transition-all px-6 py-3 rounded-2xl',
isActive(link.href) ? 'text-dream-coral bg-dream-coral/5 font-bold' : 'text-night/70 hover:bg-night/5', isActive(link.href) ? 'text-dream-coral font-bold' : 'text-night/70 hover:text-night',
]} ]}
> >
{link.label} {link.label}
</a> </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"> <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>
<a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-blue transition-colors"> <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> </a>
</div> </div>
</div> </div>
@ -109,8 +118,7 @@ function isActive(href: string): boolean {
const navbar = document.getElementById('navbar')!; const navbar = document.getElementById('navbar')!;
const menuBtn = document.getElementById('mobile-menu-btn')!; const menuBtn = document.getElementById('mobile-menu-btn')!;
const mobileMenu = document.getElementById('mobile-menu')!; const mobileMenu = document.getElementById('mobile-menu')!;
const iconMenu = document.getElementById('icon-menu')!; const menuClose = document.getElementById('mobile-menu-close')!;
const iconClose = document.getElementById('icon-close')!;
// Scroll detection // Scroll detection
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
@ -123,17 +131,15 @@ function isActive(href: string): boolean {
} }
}); });
// Mobile menu toggle // Open mobile menu
menuBtn.addEventListener('click', () => { menuBtn.addEventListener('click', () => {
const isOpen = !mobileMenu.classList.contains('hidden'); mobileMenu.classList.remove('hidden');
if (isOpen) { document.body.style.overflow = 'hidden';
mobileMenu.classList.add('hidden'); });
iconMenu.classList.remove('hidden');
iconClose.classList.add('hidden'); // Close mobile menu
} else { menuClose.addEventListener('click', () => {
mobileMenu.classList.remove('hidden'); mobileMenu.classList.add('hidden');
iconMenu.classList.add('hidden'); document.body.style.overflow = '';
iconClose.classList.remove('hidden');
}
}); });
</script> </script>