migration wip

components/Navigation.tsx

@@ -1,4 +1,6 @@
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { getLocaleFromPath } from '@/lib/i18n'
 
 interface NavigationProps {
   logo?: string
@@ -6,7 +8,13 @@ interface NavigationProps {
   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}` },
@@ -16,22 +24,36 @@ export function Navigation({ logo, siteName, locale }: NavigationProps) {
   ]
   
   return (
-    <nav className="navbar">
-      <div className="nav-container">
-        <Link href={`/${locale}`} className="nav-logo">
-          {logo || siteName}
-        </Link>
-        
-        <div className="nav-menu">
-          {mainMenu.map((item) => (
-            <Link
-              key={item.path}
-              href={item.path}
-              className="nav-link"
-            >
-              {item.title}
-            </Link>
-          ))}
+    <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>