101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
import Sticky from 'react-stickynode'
|
|
import Search from '../components/search'
|
|
import ColumnHeader from '../components/column_header'
|
|
import Sidebar from '../components/sidebar'
|
|
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
|
import NavigationBar from '../components/navigation_bar'
|
|
// import Footer from '../components/footer'
|
|
import FloatingActionButton from '../components/floating_action_button'
|
|
import Responsive from '../features/ui/util/responsive_component'
|
|
|
|
export default class Layout extends PureComponent {
|
|
static propTypes = {
|
|
actions: PropTypes.array,
|
|
tabs: PropTypes.array,
|
|
layout: PropTypes.object,
|
|
title: PropTypes.string,
|
|
showBackBtn: PropTypes.bool,
|
|
noSidebar: PropTypes.bool,
|
|
noRightSidebar: PropTypes.bool,
|
|
noHeader: PropTypes.bool,
|
|
noComposeButton: PropTypes.bool,
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
children,
|
|
title,
|
|
showBackBtn,
|
|
layout,
|
|
actions,
|
|
tabs,
|
|
noSidebar,
|
|
noRightSidebar,
|
|
noHeader,
|
|
noComposeButton,
|
|
} = this.props
|
|
|
|
return (
|
|
<div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
|
|
|
|
<NavigationBar
|
|
title={title}
|
|
tabs={tabs}
|
|
actions={actions}
|
|
/>
|
|
|
|
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
|
|
{
|
|
!noSidebar &&
|
|
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
|
<Sidebar title={title} tabs={tabs} actions={actions} />
|
|
</Responsive>
|
|
}
|
|
|
|
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}>
|
|
|
|
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
|
|
|
|
{
|
|
noRightSidebar && children
|
|
}
|
|
|
|
{
|
|
!noRightSidebar &&
|
|
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
|
|
<div className={_s.default}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
{
|
|
!noRightSidebar &&
|
|
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
|
<div className={[_s.default, _s.width340PX, _s.ml15].join(' ')}>
|
|
<Sticky top={73} enabled>
|
|
<div className={[_s.default, _s.width340PX].join(' ')}>
|
|
{layout}
|
|
</div>
|
|
</Sticky>
|
|
</div>
|
|
</Responsive>
|
|
}
|
|
|
|
{
|
|
!noComposeButton &&
|
|
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
|
|
<FloatingActionButton />
|
|
</Responsive>
|
|
}
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|