37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import { Outlet, NavLink } from 'react-router-dom'
|
||
import { CAPTURE_SHELL_NAV_ITEMS } from '../config/captureNav'
|
||
|
||
/**
|
||
* Erfassung: Mobil Chip-Leiste, Desktop linke Spalte – Wechsel zwischen Masken ohne Hub.
|
||
*/
|
||
export default function CaptureShell() {
|
||
return (
|
||
<div className="capture-shell">
|
||
<div className="capture-shell__layout">
|
||
<nav className="capture-shell__nav-wrap" aria-label="Erfassungsbereiche">
|
||
<div className="capture-shell__nav">
|
||
{CAPTURE_SHELL_NAV_ITEMS.map((e) => (
|
||
<NavLink
|
||
key={e.to}
|
||
to={e.to}
|
||
end={e.to === '/capture'}
|
||
className={({ isActive }) =>
|
||
'capture-shell__nav-item' +
|
||
(isActive ? ' capture-shell__nav-item--active' : '') +
|
||
(e.highlight ? ' capture-shell__nav-item--highlight' : '')
|
||
}
|
||
>
|
||
<span className="capture-shell__nav-icon" aria-hidden>{e.icon}</span>
|
||
<span className="capture-shell__nav-label">{e.label}</span>
|
||
</NavLink>
|
||
))}
|
||
</div>
|
||
</nav>
|
||
<div className="capture-shell__main">
|
||
<Outlet />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|