dimitar/fitaiProto
1
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: modernize admin dashboard with premium sports design

Browse Source
This commit is contained in:
ace committed 2025-12-11 13:27:57 +01:00
1 parent fda66a7703
commit e84d0f5f8f
7 files changed
+284 -168
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/admin/src/components/ui/Sidebar.tsx
+39 -16
View File
@@ -65,14 +65,24 @@ 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">
FitAI Admin
</h1>
<aside className="w-64 bg-gradient-to-b from-slate-900 via-slate-900 to-slate-950 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800/50 shadow-2xl">
{/* Logo Section */}
<div className="p-6 border-b border-slate-800/50">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center font-bold text-white shadow-lg">
⚡
</div>
<div>
<h1 className="text-lg font-black bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-300 bg-clip-text text-transparent">
FitAI
</h1>
<p className="text-xs text-slate-400 font-semibold tracking-wide">ADMIN PRO</p>
</div>
</div>
</div>
<nav className="flex-1 p-4 space-y-2">
{/* Navigation */}
<nav className="flex-1 p-4 space-y-1 overflow-y-auto">
{menuItems.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.href;
@@ -81,23 +91,36 @@ 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
? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
: "text-slate-400 hover:bg-slate-800 hover:text-white"}`}
className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group relative overflow-hidden ${isActive
? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-lg shadow-blue-900/30"
: "text-slate-400 hover:bg-slate-800/40 hover:text-white"}`}
>
<Icon size={20} className={isActive ? "text-white" : "text-slate-500 group-hover:text-white"} />
<span className="font-medium">{label}</span>
{isActive && <div className="absolute inset-0 bg-white/10 blur-xl"></div>}
<Icon size={20} className={`${isActive ? "text-white" : "text-slate-500 group-hover:text-white"} relative z-10`} />
<span className="font-semibold relative z-10">{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="/" />
{/* User Section */}
<div className="p-4 border-t border-slate-800/50 bg-slate-800/20">
<div className="flex items-center gap-3 px-3 py-3 rounded-xl bg-slate-800/50 hover:bg-slate-800/70 transition-colors">
<div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex-shrink-0 overflow-hidden">
<UserButton afterSignOutUrl="/" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-white truncate">
{user?.fullName || "Admin User"}
<p className="text-sm font-semibold text-white truncate">
{user?.fullName || "Admin"}
</p>
<p className="text-xs text-slate-400 truncate">
{user?.emailAddresses[0]?.emailAddress || "admin@fitai.com"}
</p>
</div>
</div>
</div>
</aside>
);
</p>
<p className="text-xs text-slate-400 truncate">
{user?.primaryEmailAddress?.emailAddress}