react-toolbox/docs/app/components/layout/main/components/navigation.jsx

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;