Added LoggedOutSidebar component, to Layout

• Added:
- LoggedOutSidebar component
- LoggedOutSidebar to to Layout

app/javascript/gabsocial/components/logged_out_sidebar.js

+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

app/javascript/gabsocial/layouts/layout.js

@@ -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>
  }