35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
import { FaBars, FaTimes } from 'react-icons/fa';
|
|
|
|
export default function Header() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggleMenu = () => {
|
|
setIsOpen(!isOpen);
|
|
};
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 w-full bg-white shadow-md z-50">
|
|
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<Link href="/" className="text-2xl font-bold">FF Friedberg</Link>
|
|
<div className="md:hidden">
|
|
<button onClick={toggleMenu} className="text-2xl z-50 relative">
|
|
{isOpen ? <FaTimes /> : <FaBars />}
|
|
</button>
|
|
</div>
|
|
<nav className={`md:flex ${isOpen ? 'block' : 'hidden'} fixed md:relative top-0 left-0 w-full h-full md:w-auto md:h-auto bg-white md:bg-transparent z-40`}>
|
|
<ul className="flex flex-col md:flex-row items-center justify-center h-full md:space-x-4 space-y-4 md:space-y-0 p-4 md:p-0">
|
|
<li><Link href="/#program" className="hover:underline" onClick={toggleMenu}>Programm</Link></li>
|
|
<li><Link href="/#info" className="hover:underline" onClick={toggleMenu}>Infos</Link></li>
|
|
<li><Link href="/#contact" className="hover:underline" onClick={toggleMenu}>Kontakt</Link></li>
|
|
<li><Link href="/impressum" className="hover:underline" onClick={toggleMenu}>Impressum</Link></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|