1
0
Fork 0
blog/src/components/Menu/index.astro

40 lines
878 B
Plaintext

---
import Hamburger from '@components/Hamburger.astro'
import config from '@config/blog.config'
import styles from './index.module.css'
const { menu } = config
---
<Hamburger id="menu-button" />
<nav aria-label="Pages" class={styles.menu} aria-hidden>
<ul>
{
menu.map((item) => (
<li>
<a href={item.link}>{item.title}</a>
</li>
))
}
</ul>
</nav>
<script>
let menuOpen = false
const hamburger = document.querySelector('#menu-button')
const menu = document.querySelector('[aria-label="Pages"]')
hamburger?.addEventListener('click', () => {
menuOpen = !menuOpen
if (menuOpen) {
document.body.classList.add('has-menu-open')
menu?.removeAttribute('aria-hidden')
} else {
document.body.classList.remove('has-menu-open')
menu?.setAttribute('aria-hidden', 'true')
}
})
</script>