Added SidebarXS in FooterBar and open SidebarXS from right

• Added:
- SidebarXS in FooterBar
- open SidebarXS from right

app/javascript/gabsocial/components/footer_bar.js

@@ -1,12 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { me } from '../initial_state'
+import { openSidebar } from '../actions/sidebar'
 import { CX } from '../constants'
 import Button from './button'
+import Avatar from './avatar'
 
-class FooterBar extends React.PureComponent {
+class FooterBar extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -14,8 +18,10 @@ class FooterBar extends React.PureComponent {
 
   render() {
     const {
+      account,
       notificationCount,
       homeItemsQueueCount,
+      onOpenSidebar,
     } = this.props
 
     const noRouter = !this.context.router
@@ -33,26 +39,26 @@ class FooterBar extends React.PureComponent {
         icon: 'notifications',
         title: 'Notifications',
         isHidden: !me,
-        active: currentPathname === '/notifications',
+        active: currentPathname.indexOf('/notifications') > -1,
       },
       {
         to: '/groups',
         icon: 'group',
         title: 'Groups',
-        active: currentPathname === '/groups',
-      },
-      {
-        to: '/explore',
-        icon: 'explore',
-        title: 'Explore',
-        isHidden: !me,
-        active: currentPathname === '/explore',
+        active: currentPathname.indexOf('/groups') > -1,
       },
       {
         to: '/news',
         icon: 'news',
         title: 'News',
-        active: currentPathname === '/news',
+        isHidden: !!me,
+        active: currentPathname.indexOf('/news') > -1,
+      },
+      {
+        title: 'Menu',
+        isHidden: !me,
+        active: currentPathname === `/${account.get('username')}`,
+        onClick: onOpenSidebar,
       },
     ]
 
@@ -94,6 +100,17 @@ class FooterBar extends React.PureComponent {
                       </span>
                     </div>
                   )
+                } else if (props.title === 'Menu') {
+                  const avatarContainerClasses = CX({
+                    d: 1,
+                    circle: 1,
+                    boxShadowProfileAvatarFooter: !!props.active,
+                  })
+                  childIcon = (
+                    <div className={avatarContainerClasses}>
+                      <Avatar account={account} size={24} />
+                    </div>
+                  )
                 }
 
                 return (
@@ -103,6 +120,7 @@ class FooterBar extends React.PureComponent {
                     iconSize='20px'
                     color={color}
                     to={props.to}
+                    onClick={props.onClick}
                     icon={props.icon}
                     href={props.href}
                     title={props.title}
@@ -121,14 +139,23 @@ class FooterBar extends React.PureComponent {
 
 }
 
+const mapDispatchToProps = (dispatch) => ({
+  onOpenSidebar() {
+    dispatch(openSidebar())
+  },
+})
+
 const mapStateToProps = (state) => ({
+  account: !!me ? state.getIn(['accounts', me]) : undefined,
   notificationCount: !!me ? state.getIn(['notifications', 'unread']) : 0,
   homeItemsQueueCount: !!me ? state.getIn(['timelines', 'home', 'totalQueuedItemsCount']) : 0,
 })
 
 FooterBar.propTypes = {
+  account: ImmutablePropTypes.map,
+  onOpenSidebar: PropTypes.func.isRequired,
   notificationCount: PropTypes.number.isRequired,
   homeItemsQueueCount: PropTypes.number.isRequired,
 }
 
-export default withRouter(connect(mapStateToProps)(FooterBar))
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(FooterBar))

app/javascript/gabsocial/components/sidebar_xs.js

@@ -62,7 +62,7 @@ class SidebarXS extends ImmutablePureComponent {
     return (
       <div className={containerClasses}>
         <div className={[_s.d, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
-        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgSecondary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.minW330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxW80PC, _s.overflowYScroll].join(' ')}>
+        <div className={[_s.defaut, _s.posFixed, _s.right0, _s.top0, _s.bottom0, _s.bgSecondary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.minW330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxW80PC, _s.overflowYScroll].join(' ')}>
 
           <div
             className={[_s.d, _s.h122PX].join(' ')}

app/javascript/styles/global.css

@@ -871,6 +871,10 @@ pre {
   box-shadow: 0 0 0 6px var(--solid_color_primary);
 }
 
+.boxShadowProfileAvatarFooter {
+  box-shadow: 0 0 0 4px var(--solid_color_primary), 0 0 0 5px var(--border_color_secondary);
+}
+
 .listStyleNone {
   list-style: none;
 }