Contents

/* @flow */

import React from 'react'
import { Icon } from '../'

type NavItemProps = {
  text: string,
  link: string,
  iconLeft: string,
  iconRight: string,
  active?: boolean,
  children: React.Node,
  onClick?: EventHandler,
}

const NavItem = ({
  text = '',
  link,
  active = false,
  iconLeft,
  iconRight,
  children,
  onClick = () => {},
}: NavItemProps) => {
  const Tag = link ? 'a' : 'div'

  return (
    <li className={`pb_nav_list_kit_item${active ? '_active' : ''}`}>
      <Tag
          className="pb_nav_list_item_link"
          href={link}
          onClick={onClick}
      >
        <If condition={iconLeft}>
          <div
              className="pb_nav_list_item_icon_section"
              key={iconLeft}
          >
            <Icon
                className="pb_nav_list_item_icon_left"
                fixedWidth
                icon={iconLeft}
            />
          </div>
        </If>
        <span className="pb_nav_list_item_text">
          {text || children}
        </span>
        <If condition={iconRight}>
          <div
              className="pb_nav_list_item_icon_section"
              key={iconRight}
          >
            <Icon
                className="pb_nav_list_item_icon_right"
                fixedWidth
                icon={iconRight}
            />
          </div>
        </If>
      </Tag>
    </li>
  )
}
export default NavItem

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
playbook_ui-6.2.1	app/pb_kits/playbook/pb_nav/_item.jsx
playbook_ui-6.2.0	app/pb_kits/playbook/pb_nav/_item.jsx
playbook_ui-7.0.0.pre.alpha1	app/pb_kits/playbook/pb_nav/_item.jsx