1
Fork 0

Added reverser to navbar

This commit is contained in:
Jake Howard 2016-01-20 18:51:47 +00:00
parent ae414a4a85
commit 87f3fb9882
2 changed files with 27 additions and 3 deletions

View file

@ -1,6 +1,30 @@
import React from 'react'; import React from 'react';
import Reverser from '../../helpers/reverser';
export default class Item extends React.Component { export default class Item extends React.Component {
constructor() {
super();
this.state = {
url: '#'
};
}
componentDidMount() {
if (!this.props.href && !this.props.ident) {
return;
}
if (this.props.href) {
this.setState({url: this.props.href});
} else {
Reverser(this.props.ident, this.props.args)
.then(function (url) {
this.setState({ url });
}.bind(this))
.catch(console.log);
}
}
render() { render() {
let icon; let icon;
if (this.props.icon) { if (this.props.icon) {
@ -9,7 +33,7 @@ export default class Item extends React.Component {
); );
} }
return ( return (
<li><a href={this.props.href}>{icon}{this.props.children}</a></li> <li><a href={this.state.url}>{icon}{this.props.children}</a></li>
); );
} }
} }

View file

@ -18,7 +18,7 @@ export default class NavBar extends React.Component {
</ul> </ul>
<ul className="nav navbar-nav" id="navigation"> <ul className="nav navbar-nav" id="navigation">
<Dropdown title="Projects"> <Dropdown title="Projects">
<Item href="#" icon="ion-social-freebsd-devil">Pithos</Item> <Item ident="pages:projects" args={['pithos']} icon="ion-social-freebsd-devil">Pithos</Item>
<Item href="#" icon="ion-ios-monitor">BSOD Enabler</Item> <Item href="#" icon="ion-ios-monitor">BSOD Enabler</Item>
<Item href="#" icon="ion-chatbox-working">Hipchat Emoticons for All</Item> <Item href="#" icon="ion-chatbox-working">Hipchat Emoticons for All</Item>
<Item href="#" icon="ion-social-windows">Custom PC</Item> <Item href="#" icon="ion-social-windows">Custom PC</Item>
@ -54,7 +54,7 @@ export default class NavBar extends React.Component {
</Dropdown> </Dropdown>
<Item href="#">Links</Item> <Item href="#">Links</Item>
<Dropdown title="About"> <Dropdown title="About">
<Item href="#" icon="ion-android-person">Me</Item> <Item ident="pages:about-me" icon="ion-android-person">Me</Item>
<Item href="#" icon="">Website</Item> <Item href="#" icon="">Website</Item>
<Item href="#" icon="ion-android-contacts">Contact Me</Item> <Item href="#" icon="ion-android-contacts">Contact Me</Item>
</Dropdown> </Dropdown>