75 lines
1.6 KiB
JavaScript
75 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import { NavLink, useLocation } from 'react-router-dom'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { CBadge } from '@coreui/react'
|
|
|
|
export const AppSidebarNav = ({ items }) => {
|
|
const location = useLocation()
|
|
const navLink = (name, icon, badge) => {
|
|
return (
|
|
<>
|
|
{icon && icon}
|
|
{name && name}
|
|
{badge && (
|
|
<CBadge color={badge.color} className="ms-auto">
|
|
{badge.text}
|
|
</CBadge>
|
|
)}
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
const navItem = (item, index) => {
|
|
const { component, name, badge, icon, ...rest } = item
|
|
const Component = component
|
|
return (
|
|
<>
|
|
|
|
<Component
|
|
{...(rest.to &&
|
|
!rest.items && {
|
|
component: NavLink,
|
|
activeClassName: 'active',
|
|
})}
|
|
key={index}
|
|
{...rest}
|
|
>
|
|
{navLink(name, icon, badge)}
|
|
</Component>
|
|
</>
|
|
)
|
|
}
|
|
const navGroup = (item, index) => {
|
|
const { component, name, icon, to, ...rest } = item
|
|
const Component = component
|
|
return (
|
|
<Component
|
|
idx={String(index)}
|
|
key={index}
|
|
toggler={navLink(name, icon)}
|
|
visible={location.pathname.startsWith(to)}
|
|
{...rest}
|
|
>
|
|
{item.items?.map((item, index) =>
|
|
|
|
item.items ? navGroup(item, index) : navItem(item, index),
|
|
)}
|
|
</Component>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{items &&
|
|
items.map((item, index) =>
|
|
(item.items ? navGroup(item, index) : navItem(item, index)))}
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
|
|
AppSidebarNav.propTypes = {
|
|
items: PropTypes.arrayOf(PropTypes.any).isRequired,
|
|
}
|