72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import {Button} from '@/components/ui/button'
|
|
import {Menu} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import {useScrollTarget} from '@/hooks/useScrollTarget'
|
|
|
|
type NavItem = {
|
|
label: string
|
|
scrollTo?: string
|
|
href?: string
|
|
}
|
|
|
|
export default function Navbar() {
|
|
const {handleSectionClick} = useScrollTarget()
|
|
|
|
const navItems: NavItem[] = [
|
|
{label: 'Leistungen', scrollTo: 'leistungen'},
|
|
// { label: 'Spezialisierung', scrollTo: 'specialities' },
|
|
{label: 'Über mich', scrollTo: 'about'},
|
|
{label: 'Kontakt', href: '/kontakt'},
|
|
]
|
|
|
|
const handleClick = (item: NavItem) => {
|
|
if (item.scrollTo) {
|
|
handleSectionClick(item.scrollTo)
|
|
} else if (item.href) {
|
|
window.location.href = item.href
|
|
}
|
|
}
|
|
|
|
const handleLogoClick = () => {
|
|
if (window.location.pathname === '/') {
|
|
window.scrollTo({top: 0, behavior: 'smooth'})
|
|
} else {
|
|
localStorage.setItem('scrollTarget', 'top')
|
|
window.location.href = '/'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<nav className="flex items-center justify-between px-6 py-4 border-b sticky top-0 bg-white z-50 shadow-sm">
|
|
<button
|
|
onClick={handleLogoClick}
|
|
className="text-xl font-bold hover:underline"
|
|
>
|
|
Steuerkanzlei
|
|
</button>
|
|
|
|
<div className="hidden md:flex items-center gap-6 text-sm">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.label}
|
|
onClick={() => handleClick(item)}
|
|
className="hover:underline"
|
|
>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
|
|
<Link href="/kontakt">
|
|
<Button size="sm">Jetzt Termin sichern</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="md:hidden">
|
|
<Menu/>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|