91 lines
2.8 KiB
React
91 lines
2.8 KiB
React
import { useEffect, useState } from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import './Navigation.css'
|
|
|
|
export default function Navigation() {
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const location = useLocation()
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 50)
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
function handleKeyDown(event) {
|
|
if (event.key === 'Escape') setMobileOpen(false)
|
|
}
|
|
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => document.removeEventListener('keydown', handleKeyDown)
|
|
}, [])
|
|
|
|
function closeMenu() {
|
|
setMobileOpen(false)
|
|
}
|
|
|
|
const navLinks = [
|
|
{ to: '/artikel', label: 'Artikel' },
|
|
{ to: '/kniepunkt', label: 'Kniepunkt' },
|
|
{ to: '/podcast', label: 'Podcast' },
|
|
{ to: '/speaking', label: 'Speaking' },
|
|
{ to: '/consulting', label: 'Beratung' },
|
|
{ to: '/ueber-mich', label: 'Über mich' },
|
|
{ to: '/kontakt', label: 'Kontakt' },
|
|
]
|
|
|
|
const isActive = (path) => location.pathname === path || location.pathname.startsWith(`${path}/`)
|
|
|
|
return (
|
|
<nav className={`navigation ${scrolled ? 'scrolled' : ''}`} aria-label="Hauptnavigation">
|
|
<div className="nav-container app-container">
|
|
<Link to="/" className="logo" onClick={closeMenu}>
|
|
<span className="logo-text">Dr. André Knie</span>
|
|
</Link>
|
|
|
|
<div className="nav-links">
|
|
{navLinks.map(link => (
|
|
<Link
|
|
key={link.to}
|
|
to={link.to}
|
|
className={`nav-link ${isActive(link.to) ? 'active' : ''}`}
|
|
aria-current={isActive(link.to) ? 'page' : undefined}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
className={`hamburger ${mobileOpen ? 'active' : ''}`}
|
|
onClick={() => setMobileOpen(open => !open)}
|
|
aria-label={mobileOpen ? 'Menü schließen' : 'Menü öffnen'}
|
|
aria-expanded={mobileOpen}
|
|
aria-controls="mobile-navigation"
|
|
type="button"
|
|
>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="mobile-navigation" className={`nav-mobile ${mobileOpen ? 'open' : ''}`} hidden={!mobileOpen}>
|
|
{navLinks.map(link => (
|
|
<Link
|
|
key={link.to}
|
|
to={link.to}
|
|
className={`nav-mobile-link ${isActive(link.to) ? 'active' : ''}`}
|
|
onClick={closeMenu}
|
|
aria-current={isActive(link.to) ? 'page' : undefined}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|