Added LoggedOutSidebar component, to Layout

• Added:
- LoggedOutSidebar component
- LoggedOutSidebar to to Layout

app/javascript/gabsocial/components/logged_out_sidebar.js

@@ -0,0 +1,114 @@
+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>
+    )
+  }
+
+}

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}
+                !!me &&
-                showBackBtn={showBackBtn}
+                <Sidebar
-                tabs={tabs}
+                  actions={actions}
-                title={title}
+                  showBackBtn={showBackBtn}
-              />
+                  tabs={tabs}
+                  title={title}
+                />
+              }
+              {
+                !me &&
+                <LoggedOutSidebar title={title} />
+              }
             </Responsive>
           }