feat: refine Sidebar component layout and styling; adjust padding, spacing, and button styles for improved visual consistency and user experience

This commit is contained in:
Julien Froidefond
2025-12-22 08:45:41 +01:00
parent 4f13134ef0
commit 7c3f522531

View File

@@ -77,15 +77,20 @@ function SidebarContent({
</div>
)}
<nav className={cn("flex-1 space-y-2", collapsed ? "p-2" : "p-4")}>
<nav className={cn("flex-1 pt-2", collapsed ? "p-2" : "p-4")}>
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
<Link key={item.href} href={item.href} onClick={handleLinkClick}>
<Link
key={item.href}
href={item.href}
onClick={handleLinkClick}
className="block mb-2 first:mt-0"
>
<Button
variant={isActive ? "secondary" : "ghost"}
className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl",
"w-full justify-start gap-3 h-12 rounded-2xl px-3",
isActive &&
"bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
collapsed && "justify-center px-2 w-12 mx-auto"
@@ -112,15 +117,15 @@ function SidebarContent({
<div
className={cn(
"border-t border-border/30 space-y-2",
"border-t border-border/30 pt-2",
collapsed ? "p-2" : "p-4"
)}
>
<Link href="/settings" onClick={handleLinkClick}>
<Link href="/settings" onClick={handleLinkClick} className="block mb-2">
<Button
variant="ghost"
className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl",
"w-full justify-start gap-3 h-12 rounded-2xl px-3",
collapsed && "justify-center px-2 w-12 mx-auto"
)}
>
@@ -134,7 +139,7 @@ function SidebarContent({
variant="ghost"
onClick={handleSignOut}
className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl",
"w-full justify-start gap-3 h-12 rounded-2xl px-3 mb-2",
"text-destructive",
collapsed && "justify-center px-2 w-12 mx-auto"
)}