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

133 lines
3.3 KiB
JavaScript

import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import { me } from '../initial_state'
import SidebarXS from '../components/sidebar_xs'
import NavigationBar from '../components/navigation_bar'
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
import FooterBar from '../components/footer_bar'
import GlobalFooter from '../components/global_footer'
import Responsive from '../features/ui/util/responsive_component'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
import AboutSidebar from '../components/about_sidebar'
export default class SettingsLayout extends PureComponent {
static propTypes = {
title: PropTypes.string,
}
componentWillMount() {
this.menuItems = [
{
title: 'About',
to: '/about',
},
// {
// title: 'Assets',
// to: '/about/assets',
// },
{
title: 'DMCA',
to: '/about/dmca',
},
{
title: 'Investors',
to: '/about/investors',
},
// {
// title: 'Press',
// to: '/about/press',
// },
{
title: 'Privacy Policy',
to: '/about/privacy',
},
{
title: 'Terms of Sale',
to: '/about/sales',
},
{
title: 'Terms of Service',
to: '/about/tos',
},
]
}
render() {
const { children, title } = this.props
const { menuItems } = this
const mainBlockClasses = CX({
default: 1,
width1015PX: 1,
flexRow: 1,
justifyContentEnd: 1,
py15: 1,
mlAuto: !me,
mrAuto: !me,
})
return (
<div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgPrimary].join(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<SidebarXS />
</Responsive>
{
me &&
<NavigationBar title={title} noSearch />
}
{
!me &&
<LoggedOutNavigationBar />
}
<div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<AboutSidebar title={title} items={menuItems} />
</Responsive>
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
classNamesXS={[_s.default, _s.width100PC].join(' ')}
>
<main role='main'>
<ResponsiveClassesComponent
classNames={mainBlockClasses}
classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
>
<div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<AboutSidebar title={title} items={menuItems} />
</Responsive>
<div className={_s.default}>
{children}
</div>
</div>
</ResponsiveClassesComponent>
</main>
</ResponsiveClassesComponent>
</div>
<GlobalFooter />
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<FooterBar />
</Responsive>
</div>
)
}
}