124 lines
3.3 KiB
JavaScript
124 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
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 LinkFooter from './link_footer'
|
|
|
|
class Sidebar extends React.PureComponent {
|
|
|
|
render() {
|
|
const {
|
|
intl,
|
|
title,
|
|
showLinkFooter,
|
|
} = this.props
|
|
|
|
if (!!me) return null
|
|
|
|
const menuItems = [
|
|
{
|
|
title: 'Home',
|
|
icon: 'home',
|
|
to: '/',
|
|
},
|
|
{
|
|
title: 'Search',
|
|
icon: 'search-alt',
|
|
to: '/search',
|
|
},
|
|
{
|
|
title: 'Groups',
|
|
icon: 'group',
|
|
to: '/groups',
|
|
},
|
|
{
|
|
title: 'News',
|
|
icon: 'news',
|
|
to: '/news',
|
|
},
|
|
]
|
|
|
|
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.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
|
<div className={[_s.d, _s.w240PX].join(' ')}>
|
|
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
|
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
|
<div className={[_s.d, _s.w100PC].join(' ')}>
|
|
{
|
|
!!title &&
|
|
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
|
<Heading size='h1'>
|
|
{title}
|
|
</Heading>
|
|
</div>
|
|
}
|
|
</div>
|
|
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _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>
|
|
|
|
{
|
|
showLinkFooter && <LinkFooter noPadding />
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
const messages = defineMessages({
|
|
explore: { id: 'explore', defaultMessage: 'Explore' },
|
|
menu: { id: 'menu', defaultMessage: 'Menu' },
|
|
})
|
|
|
|
Sidebar.propTypes = {
|
|
intl: PropTypes.object.isRequired,
|
|
showLinkFooter: PropTypes.bool,
|
|
title: PropTypes.string,
|
|
}
|
|
|
|
export default injectIntl(Sidebar) |