sidebar autohides

This commit is contained in:
dimitar committed 2025-12-13 03:26:30 +01:00
1 parent 5743ebc4f8
commit 868eaa5e3d
8 files changed
+24 -17

No files matched your search

@@ -73,7 +73,7 @@ export function AnalyticsDashboard() {
}
return (
<div className="space-y-6">
<div className="space-y-6 w-full">
<h2 className="text-2xl font-bold">Analytics Dashboard</h2>
{/* Key Metrics */}
@@ -143,4 +143,4 @@ export function AnalyticsDashboard() {
</Card>
</div>
)
}
}
+15 -9
View File
@@ -65,9 +65,9 @@ export function Sidebar() {
];
return (
<aside className="w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800">
<div className="p-6 border-b border-slate-800">
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
<aside className="w-20 hover:w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800 transition-all duration-300 z-50 group overflow-hidden">
<div className="p-6 border-b border-slate-800 flex items-center overflow-hidden whitespace-nowrap">
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
FitAI Admin
</h1>
</div>
@@ -81,21 +81,27 @@ export function Sidebar() {
<Link
key={item.href}
href={item.href}
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${isActive
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${isActive
? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
: "text-slate-400 hover:bg-slate-800 hover:text-white"}`}
>
<Icon size={20} className={isActive ? "text-white" : "text-slate-500 group-hover:text-white"} />
<span className="font-medium">{label}</span>
<div className="min-w-[20px]">
<Icon size={20} className={isActive ? "text-white" : "text-slate-500 group-hover:text-white"} />
</div>
<span className="font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap overflow-hidden">
{label}
</span>
</Link>
);
})}
</nav>
<div className="p-4 border-t border-slate-800">
<div className="flex items-center gap-3 px-4 py-3 rounded-lg bg-slate-800/50">
<UserButton afterSignOutUrl="/" />
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 px-2 py-3 rounded-lg bg-slate-800/50 overflow-hidden whitespace-nowrap">
<div className="min-w-[32px]">
<UserButton afterSignOutUrl="/" />
</div>
<div className="flex-1 min-w-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<p className="text-sm font-medium text-white truncate">
{user?.fullName || "Admin User"}
</p>