26 lines
742 B
React
26 lines
742 B
React
|
import { NavLink, useLocation } from 'react-router-dom'
|
||
|
|
import { getAppNavItems, isNavItemActive } from '../config/appNav.js'
|
||
|
|
|
||
|
|
export function BottomNav({ capabilities }) {
|
||
|
|
const loc = useLocation()
|
||
|
|
const items = getAppNavItems(capabilities)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="bottom-nav" aria-label="Hauptnavigation">
|
||
|
|
{items.map((item) => (
|
||
|
|
<NavLink
|
||
|
|
key={item.key}
|
||
|
|
to={item.to}
|
||
|
|
end={!!item.end}
|
||
|
|
className={({ isActive }) =>
|
||
|
|
isNavItemActive(loc.pathname, item, isActive) ? 'nav-item active' : 'nav-item'
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<item.Icon size={22} strokeWidth={2} aria-hidden />
|
||
|
|
<span>{item.shortLabel}</span>
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|