Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-20 21:48:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve link styling and accessibility in the sidebar navigation

Browse Source 
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:
michaelschal committed 2025-10-01 09:54:13 +00:00
1 parent f881f668a6
commit aba2cf204a
1 file changed
+38 -41
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/sidebar.tsx
+38 -41
View File
@@ -40,25 +40,24 @@ export default function Sidebar() {
return ( return (
<li key={item.href}> <li key={item.href}>
<Link href={item.href}> <Link
<a href={item.href}
className={` className={`
flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all
${isActive ${isActive
? 'bg-accent text-accent-foreground' ? 'bg-accent text-accent-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
} }
`} `}
data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`} data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
> >
<Icon className="w-5 h-5" /> <Icon className="w-5 h-5" />
<span>{item.label}</span> <span>{item.label}</span>
{item.badge && ( {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"> <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} {item.badge}
</span> </span>
)} )}
</a>
</Link> </Link>
</li> </li>
); );
@@ -74,20 +73,19 @@ export default function Sidebar() {
return ( return (
<li key={item.href}> <li key={item.href}>
<Link href={item.href}> <Link
<a href={item.href}
className={` className={`
flex items-center gap-3 px-4 py-3 rounded-lg transition-all flex items-center gap-3 px-4 py-3 rounded-lg transition-all
${isActive ${isActive
? 'bg-accent text-accent-foreground' ? 'bg-accent text-accent-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
} }
`} `}
data-testid={`link-${item.label.toLowerCase()}`} data-testid={`link-${item.label.toLowerCase()}`}
> >
<Icon className="w-5 h-5" /> <Icon className="w-5 h-5" />
<span>{item.label}</span> <span>{item.label}</span>
</a>
</Link> </Link>
</li> </li>
); );
@@ -97,14 +95,13 @@ export default function Sidebar() {
</nav> </nav>
<div className="p-4 border-t border-border"> <div className="p-4 border-t border-border">
<Link href="/settings"> <Link
<a 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" 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" data-testid="link-settings"
> >
<Settings className="w-5 h-5" /> <Settings className="w-5 h-5" />
<span>Paramètres</span> <span>Paramètres</span>
</a>
</Link> </Link>
</div> </div>
</aside> </aside>