50 lines
1.4 KiB
JavaScript
Raw Normal View History

2016-08-24 15:09:42 +02:00
/**
2017-03-18 17:34:00 +01:00
*
* LeftMenuLink
*
*/
2016-08-24 15:09:42 +02:00
import React from 'react';
import styles from './styles.scss';
2016-08-25 10:47:15 +02:00
import { Link } from 'react-router';
2017-03-15 11:48:56 +01:00
import LeftMenuSubLinkContainer from 'components/LeftMenuSubLinkContainer';
2017-07-21 18:15:43 +02:00
import _ from 'lodash';
2016-08-24 15:09:42 +02:00
class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
2017-03-15 11:48:56 +01:00
let subLinksContainer;
2017-03-18 17:34:00 +01:00
if (this.props.leftMenuLinks && this.props.leftMenuLinks.size) {
subLinksContainer = (
<LeftMenuSubLinkContainer
subLinks={this.props.leftMenuLinks}
destinationPrefix={this.props.destination}
/>
);
2017-03-15 11:48:56 +01:00
}
2017-07-21 18:15:43 +02:00
// We need to create our own active url checker,
// because of the two levels router.
const isLinkActive = _.startsWith(window.location.pathname.replace('/admin', ''), this.props.destination);
2016-08-24 15:09:42 +02:00
return (
2017-03-15 11:48:56 +01:00
<li>
2017-07-21 18:15:43 +02:00
<Link className={`${styles.link} ${isLinkActive ? styles.linkActive : ''}`} to={this.props.destination}>
<i className={`${styles.linkIcon} fa-${this.props.icon} fa`}></i>
2016-08-24 15:09:42 +02:00
<span className={styles.linkLabel}>{this.props.label}</span>
2016-08-25 10:47:15 +02:00
</Link>
2017-03-15 11:48:56 +01:00
{subLinksContainer}
2016-08-24 15:09:42 +02:00
</li>
);
}
}
LeftMenuLink.propTypes = {
icon: React.PropTypes.string,
label: React.PropTypes.string,
destination: React.PropTypes.string,
2016-08-30 10:53:03 +02:00
isActive: React.PropTypes.bool,
2017-03-18 17:34:00 +01:00
leftMenuLinks: React.PropTypes.object,
2016-08-24 15:09:42 +02:00
};
export default LeftMenuLink;