From aba2cf204ae4939aec3373dfe3afebf00548e1e9 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 09:54:13 +0000
Subject: [PATCH] Improve link styling and accessibility in the sidebar
 navigation

Refactor Link components in sidebar.tsx to use the new Next.js 13+ App Router syntax, removing unnecessary `<a>` tags and simplifying className application.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ds3R7vP
---
 client/src/components/sidebar.tsx | 79 +++++++++++++++----------------
 1 file changed, 38 insertions(+), 41 deletions(-)

diff --git a/client/src/components/sidebar.tsx b/client/src/components/sidebar.tsx
index 2d48049..6247a70 100644
--- a/client/src/components/sidebar.tsx
+++ b/client/src/components/sidebar.tsx
@@ -40,25 +40,24 @@ export default function Sidebar() {
             
             return (
               <li key={item.href}>
-                <Link href={item.href}>
-                  <a 
-                    className={`
-                      flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all
-                      ${isActive 
-                        ? 'bg-accent text-accent-foreground' 
-                        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
-                      }
-                    `}
-                    data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
-                  >
-                    <Icon className="w-5 h-5" />
-                    <span>{item.label}</span>
-                    {item.badge && (
-                      <span className="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">
-                        {item.badge}
-                      </span>
-                    )}
-                  </a>
+                <Link 
+                  href={item.href}
+                  className={`
+                    flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all
+                    ${isActive 
+                      ? 'bg-accent text-accent-foreground' 
+                      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                    }
+                  `}
+                  data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
+                >
+                  <Icon className="w-5 h-5" />
+                  <span>{item.label}</span>
+                  {item.badge && (
+                    <span className="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">
+                      {item.badge}
+                    </span>
+                  )}
                 </Link>
               </li>
             );
@@ -74,20 +73,19 @@ export default function Sidebar() {
               
               return (
                 <li key={item.href}>
-                  <Link href={item.href}>
-                    <a 
-                      className={`
-                        flex items-center gap-3 px-4 py-3 rounded-lg transition-all
-                        ${isActive 
-                          ? 'bg-accent text-accent-foreground' 
-                          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
-                        }
-                      `}
-                      data-testid={`link-${item.label.toLowerCase()}`}
-                    >
-                      <Icon className="w-5 h-5" />
-                      <span>{item.label}</span>
-                    </a>
+                  <Link 
+                    href={item.href}
+                    className={`
+                      flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                      ${isActive 
+                        ? 'bg-accent text-accent-foreground' 
+                        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                      }
+                    `}
+                    data-testid={`link-${item.label.toLowerCase()}`}
+                  >
+                    <Icon className="w-5 h-5" />
+                    <span>{item.label}</span>
                   </Link>
                 </li>
               );
@@ -97,14 +95,13 @@ export default function Sidebar() {
       </nav>
 
       <div className="p-4 border-t border-border">
-        <Link href="/settings">
-          <a 
-            className="flex items-center gap-3 px-4 py-3 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all"
-            data-testid="link-settings"
-          >
-            <Settings className="w-5 h-5" />
-            <span>Paramètres</span>
-          </a>
+        <Link 
+          href="/settings"
+          className="flex items-center gap-3 px-4 py-3 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all"
+          data-testid="link-settings"
+        >
+          <Settings className="w-5 h-5" />
+          <span>Paramètres</span>
         </Link>
       </div>
     </aside>