migration wip

components/layout/Navigation.tsx

@@ -0,0 +1,59 @@
+'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>
+  );
+}