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

182 lines
5.2 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
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/sidebar/logged_out_sidebar'
import DefaultSidebar from '../components/sidebar/default_sidebar'
import SidebarPanelGroup from '../components/sidebar_panel_group'
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
import LoggedOutNavigationBar from '../components/navigation_bar/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'
import GlobalFooter from '../components/global_footer'
import WrappedBundle from '../features/ui/util/wrapped_bundle'
import {
SidebarXS,
} from '../features/ui/util/async_components'
2020-04-11 23:29:19 +01:00
class Layout extends React.PureComponent {
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,
showLinkFooterInSidebar,
showGlobalFooter,
2020-05-03 06:22:49 +01:00
tabs,
title,
2020-04-11 23:29:19 +01:00
} = this.props
2020-05-14 21:45:39 +01:00
const mainBlockClasses = CX({
d: 1,
w1015PX: 1,
2020-05-14 21:45:39 +01:00
flexRow: 1,
jcEnd: 1,
py15: page !== 'group',
pb15: page === 'group',
2020-05-14 21:45:39 +01:00
})
2020-04-11 23:29:19 +01:00
return (
<div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
2020-04-11 23:29:19 +01:00
2020-05-14 07:03:22 +01:00
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<WrappedBundle component={SidebarXS} />
2020-05-14 07:03:22 +01:00
</Responsive>
2020-05-09 03:17:19 +01:00
{
me &&
<DefaultNavigationBar
2020-05-09 03:17:19 +01:00
actions={actions}
tabs={tabs}
title={title}
showBackBtn={showBackBtn}
/>
}
{
!me &&
<LoggedOutNavigationBar />
}
2020-04-11 23:29:19 +01:00
<div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
2020-04-11 23:29:19 +01:00
{
2020-04-29 23:32:49 +01:00
!noSidebar &&
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
{
!!me &&
<DefaultSidebar
actions={actions}
showBackBtn={showBackBtn}
tabs={tabs}
title={title}
/>
}
{
!me &&
<LoggedOutSidebar title={title} showLinkFooter={showLinkFooterInSidebar} />
}
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.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
classNamesSmall={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
classNamesXS={[_s.d, _s.w100PC].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}
classNamesXS={[_s.d, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
2020-05-07 05:03:34 +01:00
>
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.d, _s.w645PX, _s.z1].join(' ')}>
2020-05-06 07:24:16 +01:00
{
!!tabs &&
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.d, _s.py15].join(' ')}>
2020-05-06 07:24:16 +01:00
<Pills pills={tabs} />
</div>
</Responsive>
}
<div className={_s.d}>
2020-05-06 05:33:54 +01:00
{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.d, _s.w340PX, _s.ml15].join(' ')}>
2020-05-06 05:33:54 +01:00
<Sticky top={73} enabled>
<div className={[_s.d, _s.w340PX].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>
{
!me && showGlobalFooter && <GlobalFooter />
}
2020-04-11 23:29:19 +01:00
</div>
)
}
}
Layout.propTypes = {
actions: PropTypes.array,
children: PropTypes.node,
layout: PropTypes.array,
noComposeButton: PropTypes.bool,
noRightSidebar: PropTypes.bool,
noSidebar: PropTypes.bool,
page: PropTypes.string,
showBackBtn: PropTypes.bool,
showLinkFooterInSidebar: PropTypes.bool,
showGlobalFooter: PropTypes.bool,
tabs: PropTypes.array,
title: PropTypes.string,
}
export default Layout