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

166 lines
4.7 KiB
JavaScript
Raw Normal View History

2020-04-11 23:29:19 +01:00
import Sticky from 'react-stickynode'
2020-05-14 21:45:39 +01:00
import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
2020-05-09 03:17:19 +01:00
import { me } from '../initial_state'
import LoggedOutSidebar from '../components/logged_out_sidebar'
2020-05-14 07:03:22 +01:00
import Sidebar from '../components/sidebar'
import SidebarXS from '../components/sidebar_xs'
import SidebarPanelGroup from '../components/sidebar_panel_group'
2020-04-29 23:32:49 +01:00
import NavigationBar from '../components/navigation_bar'
2020-05-09 03:17:19 +01:00
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
2020-05-06 05:33:54 +01:00
import FooterBar from '../components/footer_bar'
2020-04-11 23:29:19 +01:00
import FloatingActionButton from '../components/floating_action_button'
import Responsive from '../features/ui/util/responsive_component'
2020-05-06 05:33:54 +01:00
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
2020-05-06 07:24:16 +01:00
import Pills from '../components/pills'
2020-04-11 23:29:19 +01:00
export default class Layout extends PureComponent {
2020-05-03 06:22:49 +01:00
2020-04-11 23:29:19 +01:00
static propTypes = {
actions: PropTypes.array,
2020-05-03 06:22:49 +01:00
children: PropTypes.node,
layout: PropTypes.array,
2020-04-11 23:29:19 +01:00
noComposeButton: PropTypes.bool,
2020-05-03 06:22:49 +01:00
noRightSidebar: PropTypes.bool,
noSidebar: PropTypes.bool,
page: PropTypes.string,
2020-05-03 06:22:49 +01:00
showBackBtn: PropTypes.bool,
tabs: PropTypes.array,
title: PropTypes.string,
2020-04-11 23:29:19 +01:00
}
render() {
const {
2020-05-03 06:22:49 +01:00
actions,
2020-04-11 23:29:19 +01:00
children,
layout,
noComposeButton,
2020-05-03 06:22:49 +01:00
noRightSidebar,
noSidebar,
page,
2020-05-03 06:22:49 +01:00
showBackBtn,
tabs,
title,
2020-04-11 23:29:19 +01:00
} = this.props
2020-05-14 21:45:39 +01:00
const mainBlockClasses = CX({
default: 1,
width1015PX: 1,
flexRow: 1,
justifyContentEnd: 1,
py15: 1,
})
2020-04-11 23:29:19 +01:00
return (
2020-04-29 23:32:49 +01:00
<div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
2020-04-11 23:29:19 +01:00
2020-05-14 07:03:22 +01:00
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<SidebarXS />
</Responsive>
2020-05-09 03:17:19 +01:00
{
me &&
<NavigationBar
actions={actions}
tabs={tabs}
title={title}
showBackBtn={showBackBtn}
/>
}
{
!me &&
<LoggedOutNavigationBar />
}
2020-04-11 23:29:19 +01:00
2020-04-29 23:32:49 +01:00
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
2020-04-11 23:29:19 +01:00
{
2020-04-29 23:32:49 +01:00
!noSidebar &&
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
{
!!me &&
<Sidebar
actions={actions}
showBackBtn={showBackBtn}
tabs={tabs}
title={title}
/>
}
{
!me &&
<LoggedOutSidebar title={title} />
}
2020-04-29 23:32:49 +01:00
</Responsive>
2020-04-11 23:29:19 +01:00
}
2020-05-09 03:17:19 +01:00
2020-05-06 05:33:54 +01:00
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
2020-05-06 07:24:16 +01:00
classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
classNamesXS={[_s.default, _s.width100PC].join(' ')}
2020-05-06 05:33:54 +01:00
>
<main role='main'>
2020-04-11 23:29:19 +01:00
2020-05-07 05:03:34 +01:00
<ResponsiveClassesComponent
2020-05-14 21:45:39 +01:00
classNames={mainBlockClasses}
2020-05-07 05:03:34 +01:00
classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
>
2020-04-11 23:29:19 +01:00
2020-05-06 05:33:54 +01:00
{
noRightSidebar && children
}
2020-04-11 23:29:19 +01:00
2020-05-06 05:33:54 +01:00
{
!noRightSidebar &&
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
2020-05-06 07:24:16 +01:00
{
!!tabs &&
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
2020-05-07 05:03:34 +01:00
<div className={[_s.default, _s.py15].join(' ')}>
2020-05-06 07:24:16 +01:00
<Pills pills={tabs} />
</div>
</Responsive>
}
2020-05-06 05:33:54 +01:00
<div className={_s.default}>
{children}
</div>
2020-04-29 23:32:49 +01:00
</div>
2020-05-06 05:33:54 +01:00
}
2020-04-29 23:32:49 +01:00
2020-05-06 05:33:54 +01:00
{
!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(' ')}>
<SidebarPanelGroup layout={layout} page={page} />
2020-05-06 05:33:54 +01:00
</div>
</Sticky>
</div>
</Responsive>
}
2020-04-11 23:29:19 +01:00
2020-05-06 05:33:54 +01:00
{
!noComposeButton &&
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<FloatingActionButton />
</Responsive>
}
2020-04-11 23:29:19 +01:00
2020-05-07 05:03:34 +01:00
</ResponsiveClassesComponent>
2020-04-11 23:29:19 +01:00
2020-05-06 05:33:54 +01:00
</main>
</ResponsiveClassesComponent>
2020-04-29 23:32:49 +01:00
</div>
2020-05-06 05:33:54 +01:00
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<FooterBar title={title} />
</Responsive>
2020-04-11 23:29:19 +01:00
</div>
)
}
}