gab-social/app/javascript/gabsocial/layouts/default_layout.js

69 lines
2.6 KiB
JavaScript
Raw Normal View History

2020-02-19 23:57:07 +00:00
import Sticky from 'react-stickynode'
2020-02-24 21:56:07 +00:00
import Search from '../components/search'
import ColumnHeader from '../components/column_header'
import Sidebar from '../components/sidebar'
2020-02-04 15:50:18 +00:00
2020-02-17 17:50:29 +00:00
export default class DefaultLayout extends PureComponent {
2020-02-04 15:50:18 +00:00
static propTypes = {
2020-02-19 23:57:07 +00:00
actions: PropTypes.array,
2020-02-22 23:26:23 +00:00
tabs: PropTypes.array,
2020-02-04 15:50:18 +00:00
layout: PropTypes.object,
2020-02-14 00:40:04 +00:00
title: PropTypes.string,
2020-02-19 23:57:07 +00:00
showBackBtn: PropTypes.bool,
2020-02-05 22:45:48 +00:00
}
2020-02-04 15:50:18 +00:00
render() {
2020-02-22 23:26:23 +00:00
const { children, title, showBackBtn, layout, actions, tabs } = this.props
// const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
// const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
2020-02-04 15:50:18 +00:00
return (
2020-03-04 03:45:16 +00:00
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
2020-02-14 00:40:04 +00:00
2020-02-19 23:57:07 +00:00
<Sidebar />
2020-02-14 00:40:04 +00:00
2020-02-21 00:57:29 +00:00
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
2020-02-14 00:40:04 +00:00
2020-03-04 03:45:16 +00:00
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
2020-02-19 23:57:07 +00:00
<div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
2020-02-21 00:57:29 +00:00
<div className={[_s.default, _s.width645PX].join(' ')}>
2020-02-22 23:26:23 +00:00
<ColumnHeader
title={title}
showBackBtn={showBackBtn}
actions={actions}
tabs={tabs}
/>
2020-02-08 22:57:09 +00:00
</div>
2020-02-21 00:57:29 +00:00
<div className={[_s.default, _s.width340PX].join(' ')}>
2020-02-17 17:50:29 +00:00
<Search />
2020-02-08 22:57:09 +00:00
</div>
</div>
</div>
2020-02-14 00:40:04 +00:00
2020-02-19 23:57:07 +00:00
<div className={[_s.default, _s.height53PX].join(' ')}></div>
2020-02-14 00:40:04 +00:00
2020-02-19 23:57:07 +00:00
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
2020-02-21 00:57:29 +00:00
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
2020-02-19 23:57:07 +00:00
<div className={_s.default}>
2020-02-04 15:50:18 +00:00
{children}
</div>
</div>
2020-02-14 00:40:04 +00:00
2020-02-21 00:57:29 +00:00
<div className={[_s.default, _s.width340PX].join(' ')}>
2020-02-19 23:57:07 +00:00
<Sticky top={73} enabled>
2020-02-21 00:57:29 +00:00
<div className={[_s.default, _s.width340PX].join(' ')}>
2020-02-19 23:57:07 +00:00
{layout}
</div>
</Sticky>
2020-02-04 15:50:18 +00:00
</div>
</div>
2020-02-14 00:40:04 +00:00
2020-02-04 15:50:18 +00:00
</main>
2020-02-14 00:40:04 +00:00
2020-02-04 15:50:18 +00:00
</div>
)
}
}