feat: enhance Header component with active link styling

- Added `usePathname` hook to determine the current route.
- Implemented `isActiveLink` and `getLinkClasses` functions for dynamic link styling based on active state.
- Adjusted navigation links in the Header to utilize the new styling functions for improved user experience.
- Updated KanbanPageClient subtitle for consistency.

components/ui/Header.tsx

@@ -1,6 +1,7 @@
 import { Card, CardContent } from '@/components/ui/Card';
 import { TaskStats } from '@/lib/types';
 import { useTheme } from '@/contexts/ThemeContext';
+import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 
 interface HeaderProps {
@@ -12,6 +13,26 @@ interface HeaderProps {
 
 export function Header({ title = "TowerControl", subtitle = "Task Management", stats, syncing = false }: HeaderProps) {
   const { theme, toggleTheme } = useTheme();
+  const pathname = usePathname();
+
+  // Fonction pour déterminer si un lien est actif
+  const isActiveLink = (href: string) => {
+    if (href === '/') {
+      return pathname === '/';
+    }
+    return pathname.startsWith(href);
+  };
+
+  // Fonction pour obtenir les classes CSS d'un lien
+  const getLinkClasses = (href: string) => {
+    const baseClasses = "font-mono text-sm uppercase tracking-wider transition-colors px-3 py-1.5 rounded-md";
+    
+    if (isActiveLink(href)) {
+      return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border border-[var(--primary)]/30`;
+    }
+    
+    return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
+  };
 
   return (
     <header className="bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
@@ -19,7 +40,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
           {/* Titre tech avec glow */}
           <div className="flex items-center gap-6">
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-4 w-[300px]">
               <div className={`w-3 h-3 rounded-full shadow-lg ${
                 syncing 
                   ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
@@ -36,34 +57,34 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
             </div>
 
             {/* Navigation */}
-            <nav className="hidden sm:flex items-center gap-4">
+            <nav className="hidden sm:flex items-center gap-2">
               <Link
                 href="/"
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
+                className={getLinkClasses('/')}
               >
                 Dashboard
               </Link>
               <Link
                 href="/kanban"
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
+                className={getLinkClasses('/kanban')}
               >
                 Kanban
               </Link>
               <Link
                 href="/daily"
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
+                className={getLinkClasses('/daily')}
               >
                 Daily
               </Link>
               <Link
                 href="/tags"
-                className="text-[var(--muted-foreground)] hover:text-[var(--accent)] transition-colors font-mono text-sm uppercase tracking-wider"
+                className={getLinkClasses('/tags')}
               >
                 Tags
               </Link>
               <Link
                 href="/settings"
-                className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
+                className={getLinkClasses('/settings')}
               >
                 Settings
               </Link>

src/app/kanban/KanbanPageClient.tsx

@@ -57,7 +57,7 @@ function KanbanPageContent() {
     <div className="min-h-screen bg-[var(--background)]">
       <Header 
         title="Kanban Board" 
-        subtitle="Gestionnaire de tâches en colonnes"
+        subtitle="Gestionnaire de tâches"
         stats={stats}
         syncing={syncing}
       />