103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
const navLinks = [
|
|
{ label: "Chi siamo", href: "/#approccio" },
|
|
{ label: "Servizi", href: "/#servizi" },
|
|
{ label: "Metodo", href: "/#filosofia" },
|
|
{ label: "Progetti", href: "/#progetti" },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
|
|
<div className="flex justify-between items-center px-6 lg:px-8 py-4 max-w-7xl mx-auto">
|
|
<Link href="/" className="block">
|
|
<Image
|
|
src="/logo.svg"
|
|
alt="CiMa Progetti"
|
|
width={110}
|
|
height={40}
|
|
className="h-8 w-auto"
|
|
priority
|
|
/>
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<div className="hidden lg:flex gap-8 items-center">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="font-sans uppercase tracking-tighter font-bold text-sm text-zinc-600 hover:text-primary transition-colors duration-300"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="/contatti"
|
|
className={`px-6 py-2 font-bold text-sm uppercase tracking-widest transition-all active:scale-95 ${
|
|
pathname === "/contatti"
|
|
? "bg-primary text-white"
|
|
: "bg-primary text-white hover:brightness-110"
|
|
}`}
|
|
>
|
|
Contatti
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Toggle */}
|
|
<button
|
|
className="lg:hidden flex items-center p-2 focus:outline-none"
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
<svg
|
|
className="w-7 h-7"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
{menuOpen ? (
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{menuOpen && (
|
|
<div className="lg:hidden bg-white border-t border-zinc-100 px-6 py-6 space-y-4">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="block font-sans uppercase tracking-tighter font-bold text-sm text-zinc-600 hover:text-primary transition-colors"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="/contatti"
|
|
className="block bg-primary text-white px-6 py-2 font-bold text-sm uppercase tracking-widest text-center"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Contatti
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|