81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Menu, X, ArrowUpRight } from "lucide-react";
|
|
import Logo from "./Logo";
|
|
import { navLinks } from "@/config/services";
|
|
|
|
export default function Header() {
|
|
const pathname = usePathname();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="fixed inset-x-0 top-0 z-50 border-b border-white/[0.06] bg-base-950/80 backdrop-blur-lg">
|
|
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
|
|
<Link href="/" onClick={() => setOpen(false)}>
|
|
<Logo />
|
|
</Link>
|
|
|
|
<nav className="hidden items-center gap-1 lg:flex">
|
|
{navLinks.map((link) => {
|
|
const active =
|
|
link.href === "/"
|
|
? pathname === "/"
|
|
: pathname.startsWith(link.href);
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`rounded-full px-4 py-2 text-sm transition-colors ${
|
|
active
|
|
? "bg-white/[0.06] text-ink-100"
|
|
: "text-ink-500 hover:text-ink-100"
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<Link
|
|
href="/contacts"
|
|
className="hidden shrink-0 items-center gap-1.5 rounded-full bg-blue-500 px-5 py-2.5 text-sm font-medium text-white transition-transform hover:scale-[1.03] lg:inline-flex"
|
|
>
|
|
Связаться
|
|
<ArrowUpRight size={16} />
|
|
</Link>
|
|
|
|
<button
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.08] text-ink-100 lg:hidden"
|
|
aria-label={open ? "Закрыть меню" : "Открыть меню"}
|
|
aria-expanded={open}
|
|
>
|
|
{open ? <X size={20} /> : <Menu size={20} />}
|
|
</button>
|
|
</div>
|
|
|
|
{open && (
|
|
<nav className="border-t border-white/[0.06] bg-base-950 px-6 py-4 lg:hidden">
|
|
<ul className="flex flex-col gap-1">
|
|
{navLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
onClick={() => setOpen(false)}
|
|
className="block rounded-lg px-3 py-2.5 text-ink-300 hover:bg-white/[0.05] hover:text-ink-100"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|