64 lines
2.0 KiB
React
64 lines
2.0 KiB
React
|
import { NavLink, useLocation } from 'react-router-dom'
|
||
|
|
import { useProgramScope } from '../context/ProgramScopeContext.jsx'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bereichs-Subnav (Mitai Settings/Admin-Shell).
|
||
|
|
*
|
||
|
|
* @param {{
|
||
|
|
* modeLabel: string,
|
||
|
|
* items: { key: string, to: string, label: string, labelFor?: (ctx: object) => string }[],
|
||
|
|
* resolveActiveKey?: (pathname: string) => string | null,
|
||
|
|
* showScope?: boolean,
|
||
|
|
* scopeMutedLabel?: string,
|
||
|
|
* }} props
|
||
|
|
*/
|
||
|
|
export function ModeAreaNav({
|
||
|
|
modeLabel,
|
||
|
|
items,
|
||
|
|
resolveActiveKey,
|
||
|
|
showScope = false,
|
||
|
|
scopeMutedLabel = 'Portfolio',
|
||
|
|
}) {
|
||
|
|
const location = useLocation()
|
||
|
|
const { initiativeId, initiativeTitle, hrefWithScope } = useProgramScope()
|
||
|
|
const activeKey = resolveActiveKey?.(location.pathname)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="analysis-split__nav" aria-label={`${modeLabel}-Navigation`}>
|
||
|
|
<div className="analysis-split__nav-header">
|
||
|
|
<span className="analysis-split__nav-eyebrow">{modeLabel}</span>
|
||
|
|
{showScope &&
|
||
|
|
(initiativeId ? (
|
||
|
|
<p className="analysis-split__nav-scope" title={initiativeTitle || initiativeId}>
|
||
|
|
{initiativeTitle || 'Vorhaben'}
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<p className="analysis-split__nav-scope analysis-split__nav-scope--muted">
|
||
|
|
{scopeMutedLabel}
|
||
|
|
</p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<ul className="analysis-split__nav-list">
|
||
|
|
{items.map((item) => {
|
||
|
|
const label = item.labelFor ? item.labelFor({}) : item.label
|
||
|
|
const isActive = activeKey === item.key
|
||
|
|
return (
|
||
|
|
<li key={item.key}>
|
||
|
|
<NavLink
|
||
|
|
to={hrefWithScope(item.to)}
|
||
|
|
end
|
||
|
|
className={({ isActive: routerActive }) =>
|
||
|
|
'analysis-split__nav-link' +
|
||
|
|
(routerActive || isActive ? ' analysis-split__nav-link--active' : '')
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</NavLink>
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|