optimizely-oui/src/components/ManagerSideNav/NavItem/index.js

Optimizely's Component Library.

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

const NavItem = ({
    className,
    isActive,
    leftContent,
    rightContent,
    testSection,
    ...props
}) => {
    return (
        <li
            className={classNames({
                "nav-list__link": true,
                "is-active": isActive,
            }, className)}
            data-test-section={testSection}
            {...props}
        >
            <div className="flex flex-justified--between flex-align--center flex--1 height--1-1">
                {leftContent}
                {rightContent && <div className="soft--right">{rightContent}</div>}
            </div>
        </li>
    );
};

NavItem.propTypes = {
    /** CSS class names. */
    className: PropTypes.string,
    /** Whether or not this item is currently selected */
    isActive: PropTypes.bool,
    /**
     * Content to render within the NavItem
     * Will be left aligned
     */
    leftContent: PropTypes.node.isRequired,
    /**
     * Content to render within the NavItem
     * Will be right aligned
     */
    rightContent: PropTypes.node,
    /** String to use for testing */
    testSection: PropTypes.string,
};

export default NavItem;