106 lines
4.6 KiB
TypeScript
106 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Menu, X, Phone } from "lucide-react";
|
|
|
|
const navigation = [
|
|
{ name: "Fernsehen", href: "/fernsehen" },
|
|
{ name: "Internet", href: "/internet" },
|
|
{ name: "Telefonie", href: "/telefonie" },
|
|
{ name: "Leistungen", href: "/leistungen" },
|
|
{ name: "Über uns", href: "/ueber-uns" },
|
|
];
|
|
|
|
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 h-16 md:h-20">
|
|
{/* Logo */}
|
|
<Link
|
|
href="/"
|
|
className="hover:no-underline"
|
|
>
|
|
<Image
|
|
src="/images/logo/logo-systems-9fd0db14.png"
|
|
alt="TeleNetSystems Logo"
|
|
width={180}
|
|
height={40}
|
|
priority
|
|
className="h-8 md:h-10 w-auto"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden lg:flex items-center gap-[var(--spacing-lg)]">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Desktop CTAs */}
|
|
<div className="hidden lg:flex items-center gap-[var(--spacing-md)]">
|
|
<a
|
|
href="tel:+43567612345"
|
|
className="flex items-center gap-[var(--spacing-xs)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:no-underline transition-colors"
|
|
>
|
|
<Phone size={18} />
|
|
<span className="text-sm">PLACEHOLDER: Telefon</span>
|
|
</a>
|
|
<Link href="/kontakt" className="btn btn-primary">
|
|
Jetzt beraten lassen
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
type="button"
|
|
className="lg:hidden p-2 text-[var(--color-foreground)]"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
|
|
>
|
|
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Mobile Navigation */}
|
|
{mobileMenuOpen && (
|
|
<div className="lg:hidden border-t border-[var(--color-border)] pb-[var(--spacing-lg)]">
|
|
<div className="stack-sm pt-[var(--spacing-md)]">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="block py-[var(--spacing-sm)] text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<div className="pt-[var(--spacing-md)] border-t border-[var(--color-border)] mt-[var(--spacing-md)]">
|
|
<Link
|
|
href="/kontakt"
|
|
className="btn btn-primary w-full"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Jetzt beraten lassen
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|