Commit 9324ea92 authored by mgabdev's avatar mgabdev

Added LoggedOutSidebar component, to Layout

• Added:
- LoggedOutSidebar component
- LoggedOutSidebar to to Layout
parent 6faa9eb4
import { injectIntl, defineMessages } from 'react-intl'
import { me } from '../initial_state'
import SidebarSectionTitle from './sidebar_section_title'
import SidebarSectionItem from './sidebar_section_item'
import Heading from './heading'
import BackButton from './back_button'
const messages = defineMessages({
explore: { id: 'explore', defaultMessage: 'Explore' },
menu: { id: 'menu', defaultMessage: 'Menu' },
})
export default
@injectIntl
class Sidebar extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
title: PropTypes.string,
}
render() {
const { intl, title } = this.props
if (!!me) return null
const menuItems = [
{
title: 'Home',
icon: 'home',
to: '/home',
},
{
title: 'Search',
icon: 'search-alt',
to: '/search',
},
{
title: 'Groups',
icon: 'group',
to: '/groups',
},
{
title: 'Explore',
icon: 'explore',
to: '/explore',
},
]
const exploreItems = [
{
title: 'Apps',
icon: 'apps',
href: 'https://apps.gab.com',
},
{
title: 'Shop',
icon: 'shop',
href: 'https://shop.dissenter.com',
},
{
title: 'Trends',
icon: 'trends',
href: 'https://trends.gab.com',
},
{
title: 'Dissenter',
icon: 'dissenter',
href: 'https://dissenter.com',
},
]
return (
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
<div className={[_s.default, _s.width240PX].join(' ')}>
<div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
<div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}>
{
!!title &&
<div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
<Heading size='h1'>
{title}
</Heading>
</div>
}
</div>
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
{
menuItems.map((menuItem, i) => {
if (menuItem.hidden) return null
return (
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
)
})
}
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
{
exploreItems.map((exploreItem, i) => (
<SidebarSectionItem {...exploreItem} key={`sidebar-item-explore-${i}`} />
))
}
</nav>
</div>
</div>
</div>
</header>
)
}
}
\ No newline at end of file
......@@ -4,6 +4,7 @@ import {
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import { me } from '../initial_state'
import LoggedOutSidebar from '../components/logged_out_sidebar'
import Sidebar from '../components/sidebar'
import SidebarXS from '../components/sidebar_xs'
import SidebarPanelGroup from '../components/sidebar_panel_group'
......@@ -50,8 +51,6 @@ export default class Layout extends PureComponent {
flexRow: 1,
justifyContentEnd: 1,
py15: 1,
mlAuto: !me,
mrAuto: !me,
})
return (
......@@ -79,12 +78,19 @@ export default class Layout extends PureComponent {
{
!noSidebar &&
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<Sidebar
actions={actions}
showBackBtn={showBackBtn}
tabs={tabs}
title={title}
/>
{
!!me &&
<Sidebar
actions={actions}
showBackBtn={showBackBtn}
tabs={tabs}
title={title}
/>
}
{
!me &&
<LoggedOutSidebar title={title} />
}
</Responsive>
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment