Enable active links in left menu

This commit is contained in:
Pierre Burgy 2017-03-18 17:59:36 +01:00
parent 09302af45e
commit d39c72a542
5 changed files with 7 additions and 10 deletions

View File

@ -23,7 +23,7 @@ class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer
return (
<li>
<Link className={`${styles.link} ${this.props.isActive ? styles.linkActive : ''}`} to={this.props.destination}>
<Link className={styles.link} activeClassName={styles.linkActive} to={this.props.destination}>
<i className={`${styles.linkIcon} ${this.props.icon} ion`}></i>
<span className={styles.linkLabel}>{this.props.label}</span>
</Link>

View File

@ -17,7 +17,6 @@ class LeftMenuLinkContainer extends React.Component { // eslint-disable-line rea
icon={plugin.get('icon') || 'ion-merge'}
label={plugin.get('name')}
destination={`/plugins/${plugin.get('id')}`}
isActive={this.props.params.plugin === plugin.get('id')}
leftMenuLinks={plugin.get('leftMenuLinks')}
/>
));

View File

@ -11,8 +11,8 @@ import { Link } from 'react-router';
class LeftMenuSubLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
return (
<li className={`${styles.leftMenuLink} ${this.props.isActive ? styles.leftMenuLinkActive : ''}`}>
<Link className={styles.link} to={this.props.destination}>
<li className={styles.leftMenuLink}>
<Link className={styles.link} to={this.props.destination} activeClassName={styles.linkActive}>
<span className={styles.linkLabel}>{this.props.label}</span>
</Link>
</li>
@ -23,7 +23,6 @@ class LeftMenuSubLink extends React.Component { // eslint-disable-line react/pre
LeftMenuSubLink.propTypes = {
label: React.PropTypes.string,
destination: React.PropTypes.string,
isActive: React.PropTypes.bool,
};
export default LeftMenuSubLink;

View File

@ -9,10 +9,6 @@
font-size: 1.2rem;
}
.leftMenuLinkActive {
border-left: 0.4rem solid $strapi-blue;
}
.link {
color: $left-menu-link-color;
padding-left: 5.8rem;
@ -25,6 +21,10 @@
}
}
.linkActive {
color: $white;
}
.linkLabel {
display: inline-block;
padding-right: 1rem;

View File

@ -16,7 +16,6 @@ class LeftMenuSubLinkContainer extends React.Component { // eslint-disable-line
key={i}
label={subLink.get('label')}
destination={`${this.props.destinationPrefix}/${subLink.get('to')}`}
isActive={false}
/>
));