122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
import { Link, useLocation } from 'react-router-dom'
|
|
import { clsx } from 'clsx'
|
|
import { useAppStore } from '@/stores/useAppStore'
|
|
import ittoIcon from '@/data/icon/ittoico.png'
|
|
import {
|
|
Home,
|
|
BookOpen,
|
|
Layers,
|
|
Scissors,
|
|
LayoutGrid,
|
|
Share2,
|
|
Settings,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
GraduationCap,
|
|
BookMarked,
|
|
Gauge,
|
|
Images,
|
|
} from 'lucide-react'
|
|
|
|
const navItems = [
|
|
{ path: '/', label: '首页', icon: Home },
|
|
{ path: '/process-matrix', label: '49过程矩阵', icon: LayoutGrid },
|
|
{ path: '/process-practice', label: '过程背诵练习', icon: GraduationCap },
|
|
{ path: '/knowledge-areas', label: '知识领域', icon: BookOpen },
|
|
{ path: '/process-groups', label: '过程组', icon: Layers },
|
|
{ path: '/knowledge-areas-tailoring', label: '裁剪因素', icon: Scissors },
|
|
{ path: '/process-graph', label: '过程关系图', icon: Share2 },
|
|
{ path: '/principles', label: '十二项原则', icon: BookMarked },
|
|
{ path: '/performance-domains', label: '八大绩效域', icon: Gauge },
|
|
{ path: '/learning-maps', label: '一图流', icon: Images },
|
|
{ path: '/settings', label: '设置', icon: Settings },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
const location = useLocation()
|
|
const sidebarOpen = useAppStore((s) => s.sidebarOpen)
|
|
const toggleSidebar = useAppStore((s) => s.toggleSidebar)
|
|
|
|
return (
|
|
<>
|
|
{/* 移动端遮罩 */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 z-20 bg-black/50 lg:hidden"
|
|
onClick={toggleSidebar}
|
|
/>
|
|
)}
|
|
|
|
{/* 侧边栏 */}
|
|
<aside
|
|
className={clsx(
|
|
'fixed left-0 top-0 z-30 h-full bg-white dark:bg-gray-800 shadow-lg transition-all duration-300',
|
|
sidebarOpen ? 'w-64' : 'w-20',
|
|
'lg:translate-x-0',
|
|
sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
|
)}
|
|
>
|
|
{/* Logo */}
|
|
<div className="flex h-16 items-center justify-between px-4 border-b border-gray-200 dark:border-gray-700">
|
|
<Link to="/" className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-900">
|
|
<img src={ittoIcon} alt="" className="h-full w-full object-cover" aria-hidden="true" />
|
|
</div>
|
|
{sidebarOpen && (
|
|
<span className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
ITTOView
|
|
</span>
|
|
)}
|
|
</Link>
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="hidden lg:flex h-8 w-8 items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500"
|
|
aria-label="切换侧边栏"
|
|
>
|
|
{sidebarOpen ? <ChevronLeft size={18} /> : <ChevronRight size={18} />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* 导航菜单 */}
|
|
<nav className="mt-4 px-3">
|
|
<ul className="space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive = location.pathname === item.path ||
|
|
(item.path !== '/' && location.pathname.startsWith(`${item.path}/`))
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<li key={item.path}>
|
|
<Link
|
|
to={item.path}
|
|
className={clsx(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400'
|
|
: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
|
|
)}
|
|
>
|
|
<Icon size={20} />
|
|
{sidebarOpen && <span>{item.label}</span>}
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
|
|
{/* 底部信息 */}
|
|
{sidebarOpen && (
|
|
<div className="absolute bottom-4 left-4 right-4">
|
|
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 p-4">
|
|
<div className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
49个过程 · 10大知识领域
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</aside>
|
|
</>
|
|
)
|
|
}
|