31 lines
995 B
Plaintext
31 lines
995 B
Plaintext
---
|
|
import MainNav from './MainNav.astro';
|
|
import type { VisitorLocale, VisitorPublication } from '../utils/visitor-navigation';
|
|
interface Props { lang?: VisitorLocale; manifest: VisitorPublication[]; }
|
|
const { lang = 'en', manifest } = Astro.props;
|
|
const menu = { en: 'Menu', es: 'Menú', ar: 'القائمة' }[lang];
|
|
---
|
|
<details class="mobile-nav">
|
|
<summary>{menu}</summary>
|
|
<MainNav lang={lang} manifest={manifest} />
|
|
</details>
|
|
|
|
<script>
|
|
document.querySelectorAll<HTMLDetailsElement>('details.mobile-nav').forEach((details) => {
|
|
details.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && details.open) {
|
|
details.open = false;
|
|
details.querySelector<HTMLElement>('summary')?.focus();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.mobile-nav { display: none; }
|
|
.mobile-nav summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
|
|
@media (max-width: 950px) {
|
|
.mobile-nav { display: block; }
|
|
}
|
|
</style>
|