69 lines
2.2 KiB
React
69 lines
2.2 KiB
React
|
import { NavLink, useLocation } from 'react-router-dom'
|
||
|
|
import { useProgramScope } from '../context/ProgramScopeContext.jsx'
|
||
|
|
import {
|
||
|
|
PLAN_OUTLINE_NODES,
|
||
|
|
resolvePlanOutlineActiveKey,
|
||
|
|
} from '../plan/planOutlineNodes.js'
|
||
|
|
|
||
|
|
export function PlanOutlineNav() {
|
||
|
|
const location = useLocation()
|
||
|
|
const { initiativeId, initiativeTitle, hrefWithScope } = useProgramScope()
|
||
|
|
const activeKey = resolvePlanOutlineActiveKey(location.pathname)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="plan-outline-nav" aria-label="Plan-Outline">
|
||
|
|
<div className="plan-outline-nav__header">
|
||
|
|
<span className="plan-outline-nav__eyebrow">Planen</span>
|
||
|
|
{initiativeId ? (
|
||
|
|
<p className="plan-outline-nav__root" title={initiativeTitle || initiativeId}>
|
||
|
|
{initiativeTitle || 'Vorhaben'}
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<p className="plan-outline-nav__root plan-outline-nav__root--muted">
|
||
|
|
Portfolio — Vorhaben wählen
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul className="plan-outline-nav__list">
|
||
|
|
{PLAN_OUTLINE_NODES.map((node) => {
|
||
|
|
const needsInitiative = node.requiresInitiative && !initiativeId
|
||
|
|
const isDisabled = node.disabled || needsInitiative
|
||
|
|
|
||
|
|
if (isDisabled) {
|
||
|
|
return (
|
||
|
|
<li key={node.key}>
|
||
|
|
<span
|
||
|
|
className={
|
||
|
|
'plan-outline-nav__link plan-outline-nav__link--disabled' +
|
||
|
|
(activeKey === node.key ? ' plan-outline-nav__link--active' : '')
|
||
|
|
}
|
||
|
|
aria-disabled="true"
|
||
|
|
title={needsInitiative ? 'Vorhaben im Scope wählen' : node.hint}
|
||
|
|
>
|
||
|
|
{node.label}
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<li key={node.key}>
|
||
|
|
<NavLink
|
||
|
|
to={hrefWithScope(node.to)}
|
||
|
|
end
|
||
|
|
className={({ isActive }) =>
|
||
|
|
'plan-outline-nav__link' +
|
||
|
|
(isActive ? ' plan-outline-nav__link--active' : '')
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{node.label}
|
||
|
|
</NavLink>
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|