59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { getLocaleFromPath } from '@/lib/i18n';
|
|
|
|
interface NavigationProps {
|
|
locale: string;
|
|
variant?: 'header' | 'footer';
|
|
}
|
|
|
|
export function Navigation({ locale, variant = 'header' }: NavigationProps) {
|
|
const pathname = usePathname();
|
|
const currentLocale = getLocaleFromPath(pathname);
|
|
|
|
// Main navigation menu
|
|
const mainMenu = [
|
|
{ title: 'Home', path: `/${locale}` },
|
|
{ title: 'Blog', path: `/${locale}/blog` },
|
|
{ title: 'Products', path: `/${locale}/products` },
|
|
{ title: 'Contact', path: `/${locale}/contact` }
|
|
];
|
|
|
|
// Determine styles based on variant
|
|
const isHeader = variant === 'header';
|
|
const baseClasses = isHeader
|
|
? 'hidden md:flex items-center gap-1'
|
|
: 'flex flex-col gap-2';
|
|
|
|
const linkClasses = isHeader
|
|
? 'px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary hover:bg-primary-light rounded-lg transition-colors relative'
|
|
: 'text-sm text-gray-600 hover:text-primary transition-colors';
|
|
|
|
const activeClasses = isHeader
|
|
? 'text-primary bg-primary-light font-semibold'
|
|
: 'text-primary font-medium';
|
|
|
|
return (
|
|
<nav className={baseClasses}>
|
|
{mainMenu.map((item) => {
|
|
const isActive = pathname === item.path ||
|
|
(item.path !== `/${locale}` && pathname.startsWith(item.path));
|
|
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
href={item.path}
|
|
className={`${linkClasses} ${isActive ? activeClasses : ''}`}
|
|
>
|
|
{item.title}
|
|
{isActive && isHeader && (
|
|
<span className="absolute bottom-0 left-3 right-3 h-0.5 bg-primary rounded-full" />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
} |