import React from 'react'; import PropTypes from 'prop-types'; import { useRouter } from 'next/router'; import classNames from 'classnames'; import styles from './NavMenu.module.css'; function NavMenu({ options = [], className, onSelect = () => {} }) { const router = useRouter(); return ( <div className={classNames(styles.menu, className)}> {options .filter(({ hidden }) => !hidden) .map(option => { const { label, value, className: customClassName, render } = option; return render ? ( render(option) ) : ( <div key={value} className={classNames(styles.option, customClassName, { [styles.selected]: router.asPath === value, })} onClick={e => onSelect(value, e)} > {label} </div> ); })} </div> ); } NavMenu.propTypes = { options: PropTypes.arrayOf( PropTypes.shape({ label: PropTypes.node, value: PropTypes.any, className: PropTypes.string, render: PropTypes.func, }), ), className: PropTypes.string, onSelect: PropTypes.func, }; export default NavMenu;