102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { Link } from "react-router-dom";
|
|
import { useState } from "react";
|
|
import {
|
|
Navbar,
|
|
NavBody,
|
|
NavItems,
|
|
MobileNav,
|
|
NavbarLogo,
|
|
NavbarButton,
|
|
MobileNavHeader,
|
|
MobileNavToggle,
|
|
MobileNavMenu,
|
|
} from "@/components/ui/resizable-navbar";
|
|
import Logo from "@/components/Logo";
|
|
|
|
const Header = () => {
|
|
const navItems = [
|
|
{ name: "Über uns", link: "#about" },
|
|
{ name: "Leistungen", link: "#services" },
|
|
{ name: "Projekte", link: "#projects" },
|
|
{ name: "Ablauf", link: "#process" },
|
|
];
|
|
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative w-full">
|
|
<Navbar>
|
|
{/* Desktop Navigation */}
|
|
<NavBody>
|
|
<NavbarLogo href="#">
|
|
<Logo width={30} height={30} />
|
|
<span className="font-display text-lg font-medium tracking-tight">
|
|
Webklar
|
|
</span>
|
|
</NavbarLogo>
|
|
<NavItems items={navItems} />
|
|
<div className="navbar-actions flex items-center gap-4">
|
|
<Link to="/kontakt">
|
|
<NavbarButton
|
|
as="span"
|
|
variant="dark"
|
|
>
|
|
Kontakt
|
|
</NavbarButton>
|
|
</Link>
|
|
</div>
|
|
</NavBody>
|
|
|
|
{/* Mobile Navigation */}
|
|
<MobileNav>
|
|
<MobileNavHeader>
|
|
<NavbarLogo href="#">
|
|
<Logo width={30} height={30} />
|
|
<span className="font-display text-lg font-medium tracking-tight">
|
|
Webklar
|
|
</span>
|
|
</NavbarLogo>
|
|
<MobileNavToggle
|
|
isOpen={isMobileMenuOpen}
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
/>
|
|
</MobileNavHeader>
|
|
|
|
<MobileNavMenu
|
|
isOpen={isMobileMenuOpen}
|
|
onClose={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{navItems.map((item, idx) => (
|
|
<a
|
|
key={`mobile-link-${idx}`}
|
|
href={item.link}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
className="relative text-neutral-600 dark:text-neutral-300"
|
|
>
|
|
<span className="block font-medium uppercase tracking-wider">
|
|
{item.name}
|
|
</span>
|
|
</a>
|
|
))}
|
|
<div className="flex w-full flex-col gap-4">
|
|
<Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
|
|
<NavbarButton
|
|
as="span"
|
|
variant="dark"
|
|
className="block w-full text-center"
|
|
>
|
|
Kontakt
|
|
</NavbarButton>
|
|
</Link>
|
|
</div>
|
|
</MobileNavMenu>
|
|
</MobileNav>
|
|
</Navbar>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Header;
|