2022-11-19 16:09:13 +01:00
|
|
|
import React, { ReactElement, useEffect, useState } from 'react'
|
2019-10-02 15:32:01 +02:00
|
|
|
import { Link } from 'gatsby'
|
2023-01-29 22:58:19 +01:00
|
|
|
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
|
2019-10-02 13:35:50 +02:00
|
|
|
import Hamburger from '../atoms/Hamburger'
|
2022-11-11 03:31:54 +01:00
|
|
|
import * as styles from './Menu.module.css'
|
2019-10-02 13:35:50 +02:00
|
|
|
|
2020-05-22 14:38:19 +02:00
|
|
|
export default function Menu(): ReactElement {
|
2019-10-02 13:35:50 +02:00
|
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
2019-10-02 15:32:01 +02:00
|
|
|
const { menu } = useSiteMetadata()
|
2019-10-02 13:35:50 +02:00
|
|
|
|
2021-03-15 21:01:55 +01:00
|
|
|
function toggleMenu(): void {
|
2019-10-02 13:35:50 +02:00
|
|
|
setMenuOpen(!menuOpen)
|
|
|
|
}
|
|
|
|
|
2022-11-19 16:09:13 +01:00
|
|
|
useEffect(() => {
|
|
|
|
if (menuOpen) {
|
|
|
|
document.body.classList.add('has-menu-open')
|
|
|
|
} else {
|
|
|
|
document.body.classList.remove('has-menu-open')
|
|
|
|
}
|
|
|
|
}, [menuOpen])
|
|
|
|
|
2022-11-11 03:31:54 +01:00
|
|
|
const MenuItems = menu.map((item) => (
|
|
|
|
<li key={item.title}>
|
|
|
|
<Link onClick={toggleMenu} to={item.link}>
|
|
|
|
{item.title}
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
))
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Hamburger onClick={toggleMenu} />
|
2022-11-19 17:31:07 +01:00
|
|
|
<nav aria-label="Pages" className={styles.menu}>
|
2019-11-09 17:28:39 +01:00
|
|
|
<ul>{MenuItems}</ul>
|
|
|
|
</nav>
|
2019-10-02 13:35:50 +02:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|