@gravityforms/components/react/admin/modules/NavBar/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes, classnames } from '@gravityforms/libraries';

const { forwardRef } = React;

/**
 * @module NavBar
 * @description The main nav used in various admin apps, without nav items.
 *
 * @since 1.1.15
 *
 * @param {object}              props                  Component props.
 * @param {JSX.Element}         props.children         React element children.
 * @param {object}              props.customAttributes Custom attributes for the component.
 * @param {string|Array|object} props.customClasses    Custom classes for the component.
 * @param {object|null}         ref                    Ref to the component.
 *
 * @return {JSX.Element} The NavBar component.
 *
 * @example
 * import NavBar from '@gravityforms/components/react/admin/modules/NavBar';
 *
 * return (
 *     <NavBar customClasses={ [ 'example-class' ] }>
 *         { children }
 *     </NavBar>
 * );
 *
 */
const NavBar = forwardRef( ( {
	children = null,
	customAttributes = {},
	customClasses = [],
}, ref ) => {
	const navAttributes = {
		className: classnames( [ 'gform-nav-bar' ], customClasses ),
		...customAttributes,
	};

	return (
		<nav { ...navAttributes } ref={ ref }>
			<div className="gform-nav-bar__logo" />
			{ children }
		</nav>
	);
} );

NavBar.propTypes = {
	children: PropTypes.oneOfType( [
		PropTypes.arrayOf( PropTypes.node ),
		PropTypes.node,
	] ),
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
};

NavBar.displayName = 'NavBar';

export default NavBar;