53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import { History } from 'react-router';
|
|
import { List, ListItem } from 'react-toolbox';
|
|
import components from '../modules/components';
|
|
import style from './navigation.scss';
|
|
|
|
const MainNavigation = React.createClass({
|
|
mixins: [History],
|
|
|
|
propTypes: {
|
|
active: React.PropTypes.bool
|
|
},
|
|
|
|
renderDrawerItems () {
|
|
return Object.keys(components).map((key) => {
|
|
const ToolboxComponent = components[key];
|
|
const to = this.context.history.createHref(ToolboxComponent.path);
|
|
let className = style.item;
|
|
if (this.context.history.isActive(ToolboxComponent.path)) {
|
|
className += ` ${style.active}`;
|
|
}
|
|
|
|
return (
|
|
<ListItem
|
|
key={key}
|
|
caption={ToolboxComponent.name}
|
|
className={className}
|
|
selectable
|
|
to={to}
|
|
/>
|
|
);
|
|
});
|
|
},
|
|
|
|
render () {
|
|
let className = style.root;
|
|
if (this.props.className) className += ` ${this.props.className}`;
|
|
|
|
return (
|
|
<aside className={className}>
|
|
<List className={style.list} selectable ripple>
|
|
{ this.renderDrawerItems() }
|
|
</List>
|
|
<footer className={style.footer}>
|
|
<span>React Toolbox ©</span>
|
|
</footer>
|
|
</aside>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default MainNavigation;
|