gab-social/app/javascript/gabsocial/components/logged_out_navigation_bar.js

101 lines
3.9 KiB
JavaScript
Raw Normal View History

import { BREAKPOINT_EXTRA_SMALL } from '../constants'
2020-05-09 03:17:19 +01:00
import Button from './button'
import NavigationBarButton from './navigation_bar_button'
2020-05-09 03:17:19 +01:00
import Search from './search'
import Text from './text'
import ResponsiveComponent from '../features/ui/util/responsive_component'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
2020-05-09 03:17:19 +01:00
export default class LoggedOutNavigationBar extends PureComponent {
static propTypes = {
isProfile: PropTypes.bool,
2020-05-09 03:17:19 +01:00
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
2020-05-09 03:17:19 +01:00
render() {
const { isProfile } = this.props
2020-05-09 03:17:19 +01:00
return (
<ResponsiveClassesComponent
classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}
classNamesXS={[_s.default, _s.z4, _s.heightMin98PX, _s.width100PC].join(' ')}
2020-05-09 03:17:19 +01:00
>
<ResponsiveClassesComponent
classNames={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
classNamesXS={[_s.default, _s.heightMin98PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
2020-05-09 03:17:19 +01:00
>
<div className={[_s.default, _s.width1255PX, _s.flexRow, _s.flexWrap, _s.height100PC].join(' ')}>
<ResponsiveClassesComponent
classNames={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}
>
2020-05-09 03:17:19 +01:00
<Button
href='/'
color='none'
backgroundColor='none'
icon='logo'
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
/>
2020-05-09 03:17:19 +01:00
{
isProfile &&
<ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.flexRow, _s.mr15].join(' ')}>
<NavigationBarButton title='Home' icon='home' href='/home' />
<NavigationBarButton title='Explore' icon='explore' to='/explore' />
<NavigationBarButton title='News' icon='news' to='/news' />
</div>
</ResponsiveComponent>
}
<div className={[_s.default, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxWidth640PX].join(' ')}>
<Search isInNav />
</div>
2020-05-09 03:17:19 +01:00
</ResponsiveClassesComponent>
2020-05-09 03:17:19 +01:00
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width330PX, _s.mlAuto].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.pb5, _s.px10, _s.width100PC].join(' ')}
2020-05-09 03:17:19 +01:00
>
<Button
isNarrow
isOutline
color='white'
backgroundColor='none'
href='/auth/sign_in'
className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.py7].join(' ')}
>
<Text color='inherit' weight='medium' align='center'>
Log in
</Text>
</Button>
<Button
isNarrow
color='brand'
backgroundColor='white'
href='/auth/sign_up'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
>
<Text color='inherit' weight='bold' align='center'>
Sign up
</Text>
</Button>
2020-05-09 03:17:19 +01:00
</ResponsiveClassesComponent>
</div>
2020-05-09 03:17:19 +01:00
</ResponsiveClassesComponent>
</ResponsiveClassesComponent>
)
}
}