81 lines
1.9 KiB
JavaScript
81 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import { NavLink, useLocation } from "react-router-dom";
|
|
import PropTypes from "prop-types";
|
|
import "simplebar-react/dist/simplebar.min.css";
|
|
import { CBadge, CNavLink } from "@coreui/react";
|
|
import "./AppSidebarNav.css";
|
|
|
|
export const AppSidebarNav = ({ items }) => {
|
|
const location = useLocation();
|
|
|
|
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">
|
|
{badge.text}
|
|
</CBadge>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const navItem = (item, index, indent = false) => {
|
|
const { component, name, badge, icon, ...rest } = item;
|
|
const Component = component;
|
|
return (
|
|
<Component
|
|
as="div"
|
|
{...(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 (
|
|
<>
|
|
{items &&
|
|
items.map((item, index) =>
|
|
item.items ? navGroup(item, index) : navItem(item, index)
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
AppSidebarNav.propTypes = {
|
|
items: PropTypes.arrayOf(PropTypes.any).isRequired,
|
|
};
|