import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';

import Button from '../button/Button';
import Icon from '../icon/Icon';
import NavMenu from './NavMenu';

const NavItem = ({ type, link, text, onClick, iconName, list }) => {
    if (type === 'link') {
        return (
            <li className="navigation__item">
                <NavLink className="navigation__link" to={link}>
                    {iconName && <Icon name={iconName} />}
                    {text}
                </NavLink>
                {list.length ? <NavMenu list={list} /> : null}
            </li>
        );
    }

    if (type === 'text') {
        return (
            <li className="navigation__item">
                <span className="navigation__link">
                    {iconName && <Icon name={iconName} />}
                    {text}
                    {list.length ? <NavMenu list={list} /> : null}
                </span>
            </li>
        );
    }

    if (type === 'button') {
        return (
            <li className="navigation__item">
                <Button className="w100" onClick={onClick}>
                    {iconName && <Icon name={iconName} />}
                    {text}
                </Button>
                {list.length ? <NavMenu list={list} /> : null}
            </li>
        );
    }

    return null;
};

NavItem.propTypes = {
    iconName: PropTypes.string,
    onClick: PropTypes.func,
    type: PropTypes.oneOf(['link', 'button', 'text']),
    link: PropTypes.string,
    text: PropTypes.string,
    list: PropTypes.arrayOf(PropTypes.object)
};

NavItem.defaultProps = {
    type: 'link',
    list: []
};

export default NavItem;

@@ -257,20 +257,16 @@
 ck, icon
-Name
 , list %7D
@@ -272,16 +272,16 @@
 %7D) =%3E %7B%0A
+
     if (
@@ -444,36 +444,32 @@
            %7Bicon
-Name
  && %3CIcon name=%7B
@@ -453,32 +453,45 @@
   %7Bicon && %3CIcon
+ fill=%22light%22
  name=%7BiconName%7D
@@ -489,37 +489,13 @@
 icon
-Name
 %7D /%3E%7D
-%0A                   
  %7Bte
@@ -783,36 +783,32 @@
            %7Bicon
-Name
  && %3CIcon name=%7B
@@ -792,32 +792,45 @@
   %7Bicon && %3CIcon
+ fill=%22light%22
  name=%7BiconName%7D
@@ -828,37 +828,13 @@
 icon
-Name
 %7D /%3E%7D
-%0A                   
  %7Bte
@@ -1141,20 +1141,16 @@
    %7Bicon
-Name
  && %3CIco
@@ -1150,16 +1150,29 @@
 && %3CIcon
+ fill=%22light%22
  name=%7Bi
@@ -1178,37 +1178,13 @@
 icon
-Name
 %7D /%3E%7D
-%0A                   
  %7Bte
@@ -1359,16 +1359,16 @@
 = %7B%0A
+
     icon
 Name
@@ -1363,20 +1363,16 @@
     icon
-Name
 : PropTy

Update sidebar to display icons