Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 17x 3x 3x 9x 3x | import { ReactNode } from 'react';
import { NavLink, Route, useRouteMatch } from 'react-router-dom';
import '../styles/components/display-menu.scss';
type Props = {
data: Array<{
name: string;
icon?: ReactNode;
path: string;
exact?: boolean;
itemContent?: ReactNode;
mainContent?: ReactNode;
}>;
};
const DisplayMenu = ({ data }: Props) => {
const { path, url } = useRouteMatch();
return (
<ul className="display-menu">
<ul className="no-bullet">
{data.map((displayItem) => (
<li key={displayItem.name}>
<h5 className="display-menu__item_title">
<NavLink
to={`${url}${
displayItem.path.length > 0
? `/${displayItem.path}`
: displayItem.path
}`}
activeClassName="display-menu__item_title--active"
exact={displayItem.exact}
>
<span className="display-menu__item_icon">
{displayItem.icon && displayItem.icon}
</span>
{displayItem.name}
</NavLink>
</h5>
<Route
path={`${path}/${displayItem.path}`}
render={() => (
<div className="display-menu__item_content">
{displayItem.itemContent}
</div>
)}
exact={displayItem.exact}
/>
</li>
))}
</ul>
</ul>
);
};
export default DisplayMenu;
|