38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { FolderKanban } from 'lucide-react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type LearningSidebarProps = {
|
|
sidebarCollapsed: boolean;
|
|
};
|
|
|
|
export function LearningSidebar({ sidebarCollapsed }: LearningSidebarProps) {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const active = location.pathname === '/learning' || location.pathname.startsWith('/learning/project/');
|
|
|
|
return (
|
|
<nav data-testid="sidebar-learning-navigation" aria-label="AI 学习导航" className="px-1 py-1">
|
|
<button
|
|
type="button"
|
|
aria-label="学习项目"
|
|
aria-current={active ? 'page' : undefined}
|
|
onClick={() => navigate('/learning')}
|
|
className={cn(
|
|
'motion-press flex min-h-10 w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm font-semibold transition-colors duration-100',
|
|
active ? 'bg-brand-soft text-foreground' : 'text-foreground hover:bg-surface-subtle',
|
|
sidebarCollapsed && 'justify-center px-0',
|
|
)}
|
|
>
|
|
<FolderKanban className="h-4 w-4 shrink-0 text-brand" />
|
|
{!sidebarCollapsed ? <span>学习项目</span> : null}
|
|
</button>
|
|
{!sidebarCollapsed ? (
|
|
<p className="px-2 pt-3 text-xs leading-5 text-muted-foreground">
|
|
阅读项目说明并下载到电脑实践。
|
|
</p>
|
|
) : null}
|
|
</nav>
|
|
);
|
|
}
|