92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
LayoutDashboard, FolderKanban, ListChecks, CalendarDays,
|
|
Settings, LogOut, Layout
|
|
} from "lucide-react";
|
|
import { useAuth } from "@/hooks/use-tygarun";
|
|
|
|
interface SidebarProps {
|
|
activePath: string;
|
|
}
|
|
|
|
const navItems = [
|
|
{ path: "/", label: "Dashboard", icon: LayoutDashboard },
|
|
{ path: "/projects", label: "Projects", icon: FolderKanban },
|
|
{ path: "/tasks", label: "Tasks", icon: ListChecks },
|
|
{ path: "/timeline", label: "Timeline", icon: CalendarDays },
|
|
{ path: "/settings", label: "Settings", icon: Settings },
|
|
];
|
|
|
|
function SidebarContent({ activePath }: SidebarProps) {
|
|
const { signout, isSignedIn } = useAuth();
|
|
return (
|
|
<div className="flex flex-col h-full w-full bg-slate-900 text-white">
|
|
{/* ── Logo ── */}
|
|
<div className="p-6">
|
|
<Link to="/" className="flex items-center gap-3 group">
|
|
<div className="h-9 w-9 rounded-lg bg-violet-600 flex items-center justify-center group-hover:bg-violet-500 transition-colors">
|
|
<Layout className="h-5 w-5 text-white" />
|
|
</div>
|
|
<span className="text-lg font-bold tracking-tight">TaskFlow</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<Separator className="bg-slate-800 mx-4" />
|
|
|
|
{/* ── Navigation ── */}
|
|
<nav className="flex-1 p-4 space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive = activePath === item.path;
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={`relative flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-200 ${
|
|
isActive
|
|
? "bg-violet-500/15 text-violet-400 shadow-sm before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-violet-500 before:rounded-r"
|
|
: "text-slate-400 hover:text-white hover:bg-slate-800"
|
|
}`}
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<Separator className="bg-slate-800 mx-4" />
|
|
|
|
{/* ── User + Logout ── */}
|
|
<div className="p-4 space-y-2">
|
|
<div className="flex items-center gap-3 px-3 py-2">
|
|
<div className="h-8 w-8 rounded-full bg-violet-500/20 flex items-center justify-center">
|
|
<span className="text-xs font-semibold text-violet-400">AK</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-white truncate">Alex Kim</p>
|
|
<p className="text-xs text-slate-500 truncate">Admin</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={() => signout()} className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-400 hover:text-red-400 hover:bg-slate-800 transition-colors w-full">
|
|
<LogOut className="h-5 w-5" />
|
|
{isSignedIn ? "Log Out" : "Signed Out"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Sidebar({ activePath }: SidebarProps) {
|
|
return (
|
|
<>
|
|
{/* Desktop Sidebar */}
|
|
<aside className="hidden lg:flex lg:fixed lg:inset-y-0 lg:left-0 lg:w-64 lg:z-50">
|
|
<SidebarContent activePath={activePath} />
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export { SidebarContent };
|