ruidy/vf-site
1
0
Fork 0
mirror of https://github.com/rjNemo/vf-site synced 2026-06-06 01:16:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(nav): add responsive mobile navigation with toggle; tidy header for md+; keep language switch and CTA accessible

Browse source
This commit is contained in:
Ruidy 2025-09-05 12:30:08 -04:00
parent ed80223e92
commit 723c6d1082
1 changed files with 43 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/layouts/BaseLayout.astro
View file

@ -23,18 +23,38 @@ const homeHref = hrefFor('home', lang);
</head>
<body class="min-h-screen bg-white text-slate-900">
<header class="border-b border-slate-200">
<nav class="mx-auto max-w-6xl flex items-center justify-between p-4">
<a href={homeHref} class="flex items-center gap-3">
<img src="/assets/images/logo.png" alt="VillaFleurie" class="h-10 w-auto" />
<span class="sr-only">VillaFleurie</span>
</a>
<div class="flex items-center gap-4">
{nav.map((n) => <a href={n.href} class="text-sm hover:underline">{n.label}</a>)}
<a href={hrefFor('contact', lang)} class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
<div class="ml-2 flex items-center gap-2 text-xs">
<a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
<span class="text-slate-400">|</span>
<a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
<nav class="mx-auto max-w-6xl p-4">
<div class="flex items-center justify-between">
<a href={homeHref} class="flex items-center gap-3">
<img src="/assets/images/logo.png" alt="VillaFleurie" class="h-10 w-auto" />
<span class="sr-only">VillaFleurie</span>
</a>
<div class="flex items-center gap-4">
<button id="nav-toggle" class="md:hidden inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-2" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M3.75 6.75A.75.75 0 0 1 4.5 6h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75ZM3.75 12a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15A.75.75 0 0 1 3.75 12Zm0 5.25a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
</button>
<div class="hidden md:flex items-center gap-4">
{nav.map((n) => <a href={n.href} class="text-sm hover:underline">{n.label}</a>)}
<a href={hrefFor('contact', lang)} class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
<div class="ml-2 flex items-center gap-2 text-xs">
<a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
<span class="text-slate-400">|</span>
<a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
</div>
</div>
</div>
</div>
<div id="mobile-menu" class="mt-3 hidden md:hidden border-t border-slate-200 pt-3">
<div class="flex flex-col gap-3">
{nav.map((n) => <a href={n.href} class="text-base">{n.label}</a>)}
<a href={hrefFor('contact', lang)} class="inline-flex items-center justify-center rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
<div class="flex items-center gap-2 text-sm">
<span class="text-slate-500">Lang:</span>
<a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
<span class="text-slate-400">|</span>
<a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
</div>
</div>
</div>
</nav>
@ -68,7 +88,18 @@ const homeHref = hrefFor('home', lang);
</div>
</footer>
<script>
// Plausible init
window.plausible = window.plausible || function(){(window.plausible.q = window.plausible.q || []).push(arguments)}
// Mobile nav toggle
const btn = document.getElementById('nav-toggle');
const menu = document.getElementById('mobile-menu');
if (btn && menu) {
btn.addEventListener('click', () => {
const isHidden = menu.classList.contains('hidden');
menu.classList.toggle('hidden', !isHidden);
btn.setAttribute('aria-expanded', String(isHidden));
});
}
</script>
<script defer data-domain="villafleuriegp.com" src="https://plausible.nemausat.com/js/script.outbound-links.js"></script>
</body>