51 lines
1.5 KiB
React
51 lines
1.5 KiB
React
|
/**
|
||
|
|
* Einheitliche Sub-Navigation (Jinkendo-Muster):
|
||
|
|
* Mobil = horizontale Chips, Desktop ≥1024px = linke Spalte (sticky).
|
||
|
|
* Nutzt .capture-shell* aus app.css.
|
||
|
|
*/
|
||
|
|
export default function AppSubnavShell({
|
||
|
|
ariaLabel,
|
||
|
|
items,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
children,
|
||
|
|
iconSize = 18,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="capture-shell app-subnav-shell">
|
||
|
|
<div className="capture-shell__layout">
|
||
|
|
<div className="capture-shell__nav-wrap">
|
||
|
|
<nav className="capture-shell__nav" aria-label={ariaLabel}>
|
||
|
|
{items.map((item) => {
|
||
|
|
const Icon = item.icon
|
||
|
|
const active = value === item.id
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={item.id}
|
||
|
|
type="button"
|
||
|
|
className={
|
||
|
|
'capture-shell__nav-item' +
|
||
|
|
(active ? ' capture-shell__nav-item--active' : '')
|
||
|
|
}
|
||
|
|
onClick={() => onChange(item.id)}
|
||
|
|
>
|
||
|
|
{Icon ? (
|
||
|
|
<Icon
|
||
|
|
className="capture-shell__nav-icon"
|
||
|
|
size={iconSize}
|
||
|
|
strokeWidth={2}
|
||
|
|
aria-hidden
|
||
|
|
/>
|
||
|
|
) : null}
|
||
|
|
<span className="capture-shell__nav-label">{item.label}</span>
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div className="capture-shell__main">{children}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|