117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { Menu, X, Phone } from "lucide-react";
|
|
|
|
const navigation = [
|
|
{ name: "Startseite", href: "/" },
|
|
{ name: "Fernsehen", href: "/fernsehen" },
|
|
{ name: "Internet", href: "/internet" },
|
|
{ name: "Telefonie", href: "/telefonie" },
|
|
{ name: "Leistungen", href: "/leistungen" },
|
|
{ name: "Über uns", href: "/ueber-uns" },
|
|
{ name: "Kontakt", href: "/kontakt" },
|
|
];
|
|
|
|
export function Header() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
|
|
<div className="container">
|
|
<nav className="flex items-center justify-between py-[var(--spacing-md)]">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex-shrink-0">
|
|
<Image
|
|
src="/images/brand/logo-systems-9fd0db14.png"
|
|
alt="Telenet Systems GmbH"
|
|
width={180}
|
|
height={57}
|
|
priority
|
|
className="h-10 w-auto md:h-12"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-lg)]">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA & Phone (Desktop) */}
|
|
<div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]">
|
|
<a
|
|
href="tel:+4356725000"
|
|
className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
|
aria-label="Anrufen: +43 5672 5000"
|
|
>
|
|
<Phone className="h-4 w-4" aria-hidden="true" />
|
|
<span>+43 5672 5000</span>
|
|
</a>
|
|
<Link href="/kontakt" className="btn btn-primary">
|
|
Jetzt beraten lassen
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
type="button"
|
|
className="lg:hidden p-[var(--spacing-sm)] -mr-[var(--spacing-sm)] text-[var(--color-foreground)]"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
aria-expanded={mobileMenuOpen}
|
|
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
|
|
>
|
|
{mobileMenuOpen ? (
|
|
<X className="h-6 w-6" aria-hidden="true" />
|
|
) : (
|
|
<Menu className="h-6 w-6" aria-hidden="true" />
|
|
)}
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Mobile Navigation */}
|
|
{mobileMenuOpen && (
|
|
<div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]">
|
|
<div className="flex flex-col gap-[var(--spacing-sm)]">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="py-[var(--spacing-sm)] text-base font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
|
|
<a
|
|
href="tel:+4356725000"
|
|
className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
|
|
>
|
|
<Phone className="h-5 w-5" aria-hidden="true" />
|
|
<span>+43 5672 5000</span>
|
|
</a>
|
|
<Link
|
|
href="/kontakt"
|
|
className="btn btn-primary mt-[var(--spacing-sm)]"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Jetzt beraten lassen
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|