61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { getLocaleFromPath } from '@/lib/i18n'
|
|
|
|
interface NavigationProps {
|
|
logo?: string
|
|
siteName: string
|
|
locale: string
|
|
}
|
|
|
|
/**
|
|
* @deprecated Use components/layout/Navigation instead
|
|
*/
|
|
export function Navigation({ logo, siteName, locale }: NavigationProps) {
|
|
const pathname = usePathname()
|
|
const currentLocale = getLocaleFromPath(pathname)
|
|
|
|
// Static menu for now - can be made dynamic later
|
|
const mainMenu = [
|
|
{ title: 'Home', path: `/${locale}` },
|
|
{ title: 'Blog', path: `/${locale}/blog` },
|
|
{ title: 'Products', path: `/${locale}/products` },
|
|
{ title: 'Contact', path: `/${locale}/contact` }
|
|
]
|
|
|
|
return (
|
|
<nav className="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-100">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<Link href={`/${locale}`} className="text-xl font-bold text-primary">
|
|
{logo || siteName}
|
|
</Link>
|
|
|
|
<div className="hidden md:flex items-center gap-1">
|
|
{mainMenu.map((item) => {
|
|
const isActive = pathname === item.path ||
|
|
(item.path !== `/${locale}` && pathname.startsWith(item.path))
|
|
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
href={item.path}
|
|
className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
|
|
isActive
|
|
? 'text-primary bg-primary-light font-semibold'
|
|
: 'text-gray-700 hover:text-primary hover:bg-primary-light'
|
|
}`}
|
|
>
|
|
{item.title}
|
|
{isActive && (
|
|
<span className="block h-0.5 bg-primary rounded-full mt-1" />
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
} |