41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
|
import { Link, useLocation } from 'react-router-dom';
|
||
|
|
|
||
|
|
interface BoardSidebarProps {
|
||
|
|
boardId: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function BoardSidebar({ boardId }: BoardSidebarProps) {
|
||
|
|
const location = useLocation();
|
||
|
|
|
||
|
|
const menuItems = [
|
||
|
|
{ id: 'epics', label: 'Epics', icon: '📋', path: `/boards/${boardId}/epics` },
|
||
|
|
{ id: 'history', label: 'History', icon: '📜', path: `/boards/${boardId}/history` },
|
||
|
|
{ id: 'documents', label: 'Documents', icon: '📄', path: `/boards/${boardId}/documents` },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-64 bg-gray-800 rounded-lg p-4 border border-gray-700 h-fit sticky top-4">
|
||
|
|
<h3 className="text-white font-bold text-lg mb-4">Board Menu</h3>
|
||
|
|
<nav className="space-y-2">
|
||
|
|
{menuItems.map((item) => {
|
||
|
|
const isActive = location.pathname === item.path;
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={item.id}
|
||
|
|
to={item.path}
|
||
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${
|
||
|
|
isActive
|
||
|
|
? 'bg-blue-600 text-white'
|
||
|
|
: 'text-gray-300 hover:bg-gray-700 hover:text-white'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<span className="text-lg">{item.icon}</span>
|
||
|
|
<span className="font-medium">{item.label}</span>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|