37 lines
1.2 KiB
React
37 lines
1.2 KiB
React
|
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>
|
|||
|
|
)
|
|||
|
|
}
|