106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { Menu, X } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import LanguageSwitcher from "./languageSwitcher";
|
|
import { useLanguage } from "@/context/language-context";
|
|
|
|
interface NavLink {
|
|
id: string;
|
|
labelKey: string;
|
|
href: string;
|
|
}
|
|
|
|
interface NavbarProps {
|
|
logoText?: string;
|
|
}
|
|
|
|
export function Navbar({ logoText = "FIRMA" }: NavbarProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { t } = useLanguage();
|
|
|
|
const navLinks: NavLink[] = [
|
|
{ id: "about", labelKey: t.nav.about, href: "#about" },
|
|
{ id: "products", labelKey: t.nav.products, href: "#products" },
|
|
{ id: "faq", labelKey: t.nav.faq, href: "#faq" },
|
|
{ id: "contact", labelKey: t.nav.contact , href: "#contact" },
|
|
];
|
|
|
|
const handleScroll = (href: string) => {
|
|
if (href.startsWith("#")) {
|
|
const element = document.querySelector(href);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
|
|
<Link
|
|
href={`/`}
|
|
className="text-2xl font-bold bg-linear-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent"
|
|
>
|
|
{logoText}
|
|
</Link>
|
|
</motion.div>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex items-center gap-8">
|
|
{navLinks.map((link) => (
|
|
<motion.button
|
|
key={link.id}
|
|
whileHover={{ color: "#2563eb" }}
|
|
onClick={() => handleScroll(link.href)}
|
|
className="text-gray-700 hover:text-blue-600 transition-colors"
|
|
>
|
|
{link.labelKey}
|
|
</motion.button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Language & Mobile Menu */}
|
|
<div className="flex items-center gap-4">
|
|
<LanguageSwitcher />
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="md:hidden p-2 rounded-lg hover:bg-gray-100"
|
|
>
|
|
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="md:hidden pb-4 space-y-2"
|
|
>
|
|
{navLinks.map((link) => (
|
|
<button
|
|
key={link.id}
|
|
onClick={() => handleScroll(link.href)}
|
|
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition-colors"
|
|
>
|
|
{link.labelKey}
|
|
</button>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|