mirror of
https://github.com/tomru/pfadi-bussle.git
synced 2026-03-03 14:37:13 +01:00
129 lines
3.4 KiB
TypeScript
129 lines
3.4 KiB
TypeScript
import React, { useState } from 'react'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import User from './user'
|
|
|
|
type INavEntry = {
|
|
label: string
|
|
href: string
|
|
}
|
|
|
|
const NAV_ENTRIES = [
|
|
{
|
|
label: 'Home',
|
|
href: '/',
|
|
},
|
|
{
|
|
label: 'Buchungsanfrage',
|
|
href: '/book',
|
|
},
|
|
{
|
|
label: 'Preise',
|
|
href: '/prices',
|
|
},
|
|
{
|
|
label: 'Mietbedingungen',
|
|
href: '/terms',
|
|
},
|
|
]
|
|
|
|
function NavEntries({ children, navEntries, changeRoute }) {
|
|
return (
|
|
<>
|
|
{navEntries?.map(({ label, href }: INavEntry, index: React.Key) => {
|
|
return (
|
|
<a
|
|
key={index}
|
|
href={href}
|
|
onClick={changeRoute}
|
|
className="text-base font-medium text-gray-500 hover:text-gray-900"
|
|
>
|
|
{label}
|
|
</a>
|
|
)
|
|
})}
|
|
{children}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function Header() {
|
|
const router = useRouter()
|
|
const [hamburgerOpen, setHamburgerOpen] = useState(false)
|
|
|
|
function changeRoute(event: React.PointerEvent<HTMLAnchorElement>) {
|
|
event.preventDefault()
|
|
setHamburgerOpen(false)
|
|
router.push(event.currentTarget.href)
|
|
}
|
|
|
|
const navEntries: (INavEntry | React.ReactNode)[] = [
|
|
...NAV_ENTRIES,
|
|
<User key="user" />,
|
|
]
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Pfadi-Bussle</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<div className="">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6">
|
|
<div className="relative flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
|
|
<div className="flex justify-start lg:w-0 flex-1">
|
|
<Link
|
|
href="/"
|
|
className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl"
|
|
>
|
|
Pfadi-Bussle
|
|
</Link>
|
|
</div>
|
|
<nav className="hidden space-x-10 sm:flex items-center">
|
|
<NavEntries navEntries={navEntries} changeRoute={changeRoute}>
|
|
<User />
|
|
</NavEntries>
|
|
</nav>
|
|
<nav
|
|
onClick={() => setHamburgerOpen(!hamburgerOpen)}
|
|
className="flex flex-col items-center sm:hidden text-gray-500 hover:text-gray-900 cursor-pointer"
|
|
>
|
|
<svg
|
|
className="w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
</svg>
|
|
<div
|
|
className={`${
|
|
hamburgerOpen || 'hidden'
|
|
} absolute z-10 mt-5 transform right-0`}
|
|
>
|
|
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
|
<div className="relative grid gap-2 bg-white px-4 py-2">
|
|
<NavEntries
|
|
navEntries={navEntries}
|
|
changeRoute={changeRoute}
|
|
>
|
|
<User />
|
|
</NavEntries>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|