This commit is contained in:
2025-10-21 22:25:26 +02:00
parent b9c74e12bc
commit e4048f90e5
31 changed files with 872 additions and 62 deletions

View File

@@ -6,15 +6,15 @@ import { Link, Outlet } from "react-router-dom";
export default function DashboardLayout() {
return (
<div className="flex h-screen bg-gray-100 text-gray-900">
<div className="flex h-screen bg-black text-white">
{/* Sidebar */}
<motion.aside
initial={{ x: -250 }}
animate={{ x: 0 }}
transition={{ duration: 0.4 }}
className="w-64 bg-white shadow-xl flex flex-col"
className="w-64 bg-zinc-900 shadow-xl flex flex-col"
>
<div className="p-4 font-bold text-xl border-b border-gray-200">
<div className="p-4 font-bold text-xl border-b border-gray-800">
MyDashboard
</div>
<nav className="flex-1 p-4 space-y-2">
@@ -22,7 +22,7 @@ export default function DashboardLayout() {
<SidebarLink to="/profile" icon={<FaUser />} label="Profile" />
<SidebarLink to="/settings" icon={<FaCog />} label="Settings" />
</nav>
<div className="p-4 border-t border-gray-200">
<div className="p-4 border-t border-gray-800">
<SidebarLink to="/logout" icon={<FaSignOutAlt />} label="Logout" />
</div>
</motion.aside>
@@ -34,11 +34,11 @@ export default function DashboardLayout() {
initial={{ y: -80 }}
animate={{ y: 0 }}
transition={{ duration: 0.3 }}
className="bg-white shadow px-6 py-3 flex justify-between items-center"
className="bg-zinc-950 shadow px-6 py-3 flex justify-between items-center border-b border-gray-800"
>
<h1 className="text-lg font-semibold">Dashboard</h1>
<div className="flex items-center space-x-4">
<span className="text-gray-600">Welcome back!</span>
<span className="text-white/80">Welcome back!</span>
<img
src="https://ui-avatars.com/api/?name=User&background=0D8ABC&color=fff"
alt="avatar"
@@ -52,7 +52,7 @@ export default function DashboardLayout() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
className="flex-1 overflow-y-auto p-6"
className="flex-1 overflow-y-auto p-6 bg-black"
>
<Outlet />
</motion.main>
@@ -71,7 +71,7 @@ function SidebarLink({ to, icon, label }: SidebarLinkProps) {
return (
<Link
to={to}
className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-blue-100 hover:text-blue-700 transition-colors"
className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-white/10 hover:text-white transition-colors"
>
<span className="text-lg">{icon}</span>
<span className="text-sm font-medium">{label}</span>