parent
1bfbce7b45
commit
989c3f4002
9 changed files with 103 additions and 32 deletions
@ -1,26 +1,75 @@ |
|||||||
import PureRenderMixin from 'react-addons-pure-render-mixin'; |
import { Link } from 'react-router'; |
||||||
|
import { injectIntl, defineMessages } from 'react-intl'; |
||||||
|
|
||||||
const style = { |
const messages = defineMessages({ |
||||||
|
start: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, |
||||||
|
public: { id: 'navigation_bar.public_timeline', defaultMessage: 'Public timeline' }, |
||||||
|
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, |
||||||
|
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' } |
||||||
|
}); |
||||||
|
|
||||||
|
const outerStyle = { |
||||||
|
boxSizing: 'border-box', |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
overflowY: 'hidden' |
||||||
|
}; |
||||||
|
|
||||||
|
const innerStyle = { |
||||||
boxSizing: 'border-box', |
boxSizing: 'border-box', |
||||||
background: '#454b5e', |
|
||||||
padding: '0', |
padding: '0', |
||||||
display: 'flex', |
display: 'flex', |
||||||
flexDirection: 'column', |
flexDirection: 'column', |
||||||
overflowY: 'auto' |
overflowY: 'auto', |
||||||
|
flexGrow: '1' |
||||||
|
}; |
||||||
|
|
||||||
|
const tabStyle = { |
||||||
|
display: 'block', |
||||||
|
flex: '1 1 auto', |
||||||
|
padding: '15px', |
||||||
|
paddingBottom: '13px', |
||||||
|
color: '#9baec8', |
||||||
|
textDecoration: 'none', |
||||||
|
textAlign: 'center', |
||||||
|
fontSize: '16px', |
||||||
|
borderBottom: '2px solid transparent' |
||||||
}; |
}; |
||||||
|
|
||||||
const Drawer = React.createClass({ |
const tabActiveStyle = { |
||||||
|
color: '#2b90d9', |
||||||
|
borderBottom: '2px solid #2b90d9' |
||||||
|
}; |
||||||
|
|
||||||
mixins: [PureRenderMixin], |
const Drawer = ({ children, withHeader, intl }) => { |
||||||
|
let header = ''; |
||||||
|
|
||||||
render () { |
if (withHeader) { |
||||||
return ( |
header = ( |
||||||
<div className='drawer' style={style}> |
<div className='drawer__header'> |
||||||
{this.props.children} |
<Link title={intl.formatMessage(messages.start)} style={tabStyle} to='/getting-started'><i className='fa fa-fw fa-bars' /></Link> |
||||||
|
<Link title={intl.formatMessage(messages.public)} style={tabStyle} to='/timelines/public'><i className='fa fa-fw fa-globe' /></Link> |
||||||
|
<a title={intl.formatMessage(messages.preferences)} style={tabStyle} href='/settings/preferences'><i className='fa fa-fw fa-cog' /></a> |
||||||
|
<a title={intl.formatMessage(messages.logout)} style={tabStyle} href='/auth/sign_out' data-method='delete'><i className='fa fa-fw fa-sign-out' /></a> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
}); |
return ( |
||||||
|
<div className='drawer' style={outerStyle}> |
||||||
|
{header} |
||||||
|
|
||||||
|
<div className='drawer__inner' style={innerStyle}> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
Drawer.propTypes = { |
||||||
|
withHeader: React.PropTypes.bool, |
||||||
|
children: React.PropTypes.node, |
||||||
|
intl: React.PropTypes.object |
||||||
|
}; |
||||||
|
|
||||||
export default Drawer; |
export default injectIntl(Drawer); |
||||||
|
Loading…
Reference in new issue