Tax Lawfirm Demo 1

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/components/Navbar.tsx

@@ -0,0 +1,71 @@
+'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>
+    )
+}