File size: 2,000 Bytes
60db1d1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import React from 'react'
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types'
import SimpleBar from 'simplebar-react'
import 'simplebar-react/dist/simplebar.min.css'
import { CBadge, CNavLink, CSidebarNav } from '@coreui/react'
export const AppSidebarNav = ({ items }) => {
const navLink = (name, icon, badge, indent = false) => {
return (
<>
{icon
? icon
: indent && (
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>
)}
{name && name}
{badge && (
<CBadge color={badge.color} className="ms-auto" size="sm">
{badge.text}
</CBadge>
)}
</>
)
}
const navItem = (item, index, indent = false) => {
const { component, name, badge, icon, ...rest } = item
const Component = component
return (
<Component as="div" key={index}>
{rest.to || rest.href ? (
<CNavLink
{...(rest.to && { as: NavLink })}
{...(rest.href && { target: '_blank', rel: 'noopener noreferrer' })}
{...rest}
>
{navLink(name, icon, badge, indent)}
</CNavLink>
) : (
navLink(name, icon, badge, indent)
)}
</Component>
)
}
const navGroup = (item, index) => {
const { component, name, icon, items, to, ...rest } = item
const Component = component
return (
<Component compact as="div" key={index} toggler={navLink(name, icon)} {...rest}>
{items?.map((item, index) =>
item.items ? navGroup(item, index) : navItem(item, index, true),
)}
</Component>
)
}
return (
<CSidebarNav as={SimpleBar}>
{items &&
items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
</CSidebarNav>
)
}
AppSidebarNav.propTypes = {
items: PropTypes.arrayOf(PropTypes.any).isRequired,
}
|