Updated LoggedOutNavigationBar to show links if on profile, grow search bar

• Updated:
- LoggedOutNavigationBar to show links if on profile, grow search bar
This commit is contained in:
mgabdev 2020-07-24 18:59:46 -05:00
parent 8abd3f59ad
commit 4b79bf0d06
2 changed files with 22 additions and 5 deletions

View File

@ -1,16 +1,22 @@
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Button from './button'
import NavigationBarButton from './navigation_bar_button'
import Search from './search'
import Text from './text'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component';
import ResponsiveComponent from '../features/ui/util/responsive_component'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
export default class LoggedOutNavigationBar extends PureComponent {
static propTypes = {
isProfile: PropTypes.bool,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const { isProfile } = this.props
return (
<ResponsiveClassesComponent
classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}
@ -24,7 +30,7 @@ export default class LoggedOutNavigationBar extends PureComponent {
<div className={[_s.default, _s.width1255PX, _s.flexRow, _s.flexWrap, _s.height100PC].join(' ')}>
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width330PX].join(' ')}
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(' ')}
>
@ -36,6 +42,17 @@ export default class LoggedOutNavigationBar extends PureComponent {
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
/>
{
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='Groups' icon='group' to='/groups' />
</div>
</ResponsiveComponent>
}
<div className={[_s.default, _s.flexGrow1, _s.mr10].join(' ')}>
<Search isInNav />
</div>

View File

@ -53,7 +53,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
}
{
!me &&
<LoggedOutNavigationBar />
<LoggedOutNavigationBar isProfile />
}
<main role='main' className={[_s.default, _s.width100PC].join(' ')}>
@ -98,7 +98,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
}
{
!me &&
<LoggedOutNavigationBar />
<LoggedOutNavigationBar isProfile />
}
<main role='main' className={[_s.default, _s.width100PC].join(' ')}>