71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
|
import { NavLink, useLocation } from 'react-router-dom'
|
|||
|
|
import { navGroupsForOnboarding } from '../lib/onboarding'
|
|||
|
|
import type { AcAppKey } from '../lib/acAssets'
|
|||
|
|
import { useOnboarding } from '../onboarding/OnboardingContext'
|
|||
|
|
import { AcIcon } from './AcIcon'
|
|||
|
|
|
|||
|
|
function SidebarNavItem({
|
|||
|
|
to,
|
|||
|
|
label,
|
|||
|
|
icon,
|
|||
|
|
end,
|
|||
|
|
matchPrefix,
|
|||
|
|
}: {
|
|||
|
|
to: string
|
|||
|
|
label: string
|
|||
|
|
icon: AcAppKey
|
|||
|
|
end?: boolean
|
|||
|
|
matchPrefix?: string
|
|||
|
|
}) {
|
|||
|
|
const { pathname } = useLocation()
|
|||
|
|
return (
|
|||
|
|
<NavLink
|
|||
|
|
to={to}
|
|||
|
|
end={end}
|
|||
|
|
className={({ isActive }) => {
|
|||
|
|
const prefixActive = matchPrefix ? pathname.startsWith(matchPrefix) : false
|
|||
|
|
const active = isActive || prefixActive
|
|||
|
|
return `ac-sidebar-nav-item ${active ? 'ac-sidebar-nav-item--active' : ''}`
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<AcIcon app={icon} size="sm" className="ac-sidebar-nav-icon shrink-0" />
|
|||
|
|
<span className="min-w-0 truncate">{label}</span>
|
|||
|
|
</NavLink>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function AppSidebar() {
|
|||
|
|
const { isComplete } = useOnboarding()
|
|||
|
|
const groups = navGroupsForOnboarding(isComplete)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<aside className="ac-sidebar hidden lg:flex" aria-label="側欄導覽">
|
|||
|
|
{!isComplete ? (
|
|||
|
|
<p className="ac-sidebar-onboarding-hint px-4 pb-2 pt-3 text-xs leading-relaxed text-ink-secondary">
|
|||
|
|
完成入門設定後，會解鎖總覽、任務與更多功能。
|
|||
|
|
</p>
|
|||
|
|
) : null}
|
|||
|
|
<nav className="ac-sidebar-nav ac-sidebar-nav--top">
|
|||
|
|
{groups.map((group, index) => (
|
|||
|
|
<div key={group.label} className="ac-sidebar-nav-group">
|
|||
|
|
{index > 0 ? <div className="ac-sidebar-nav-divider" aria-hidden /> : null}
|
|||
|
|
<p className="ac-sidebar-nav-label">{group.label}</p>
|
|||
|
|
<ul className="space-y-0.5">
|
|||
|
|
{group.items.map((item) => (
|
|||
|
|
<li key={item.to}>
|
|||
|
|
<SidebarNavItem
|
|||
|
|
to={item.to}
|
|||
|
|
label={item.label}
|
|||
|
|
icon={item.icon}
|
|||
|
|
end={item.end}
|
|||
|
|
matchPrefix={item.matchPrefix}
|
|||
|
|
/>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</nav>
|
|||
|
|
</aside>
|
|||
|
|
)
|
|||
|
|
}
|