mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-11 17:26:45 +02:00
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
This commit is contained in:
1 parent
f881f668a6
commit
aba2cf204a
1 file changed
+38
-41
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user