Added footer bar component, styles to app

app/javascript/gabsocial/features/ui/components/footer_bar.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink, withRouter } from 'react-router-dom';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import NotificationsCounterIcon from './notifications_counter_icon';
+import { me } from '../../../initial_state';
+
+const links = [
+ <NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'>
+ <i className='tabs-bar__link__icon home'/>
+ <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
+ </NavLink>,
+ <NavLink key='pr2' className='footer-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
+ <i className='tabs-bar__link__icon notifications'/>
+ <NotificationsCounterIcon />
+ <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
+ </NavLink>,
+ <NavLink key='pr3' className='footer-bar__link' to='/groups' data-preview-title-id='column.groups'>
+ <i className='tabs-bar__link__icon groups'/>
+ <FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
+ </NavLink>,
+ <a key='pl4' className='footer-bar__link footer-bar__link--trends' href='https://trends.gab.com' data-preview-title-id='tabs_bar.trends'>
+ <i className='tabs-bar__link__icon trends'/>
+ <FormattedMessage id='tabs_bar.trends' defaultMessage='Trends' />
+ </a>,
+]
+
+export default
+@injectIntl
+@withRouter
+class FooterBar extends React.PureComponent {
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ }
+
+ render () {
+ const { intl: { formatMessage } } = this.props;
+
+ if (!me) return null;
+
+ return (
+ <div className='footer-bar'>
+ <div className='footer-bar__container'>
+ {
+ links.map((link) =>
+ React.cloneElement(link, {
+ key: link.props.to,
+ 'aria-label': formatMessage({
+ id: link.props['data-preview-title-id']
+ })
+ }))
+ }
+ </div>
+ </div>
+ );
+ }
+}
\ No newline at end of file

app/javascript/gabsocial/features/ui/index.js

@@ -21,6 +21,7 @@ import { openModal } from '../../actions/modal';
 import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
 import UploadArea from './components/upload_area';
 import TabsBar from './components/tabs_bar';
+import FooterBar from './components/footer_bar';
 // import TrendsPanel from './components/trends_panel';
 import WhoToFollowPanel from './components/who_to_follow_panel';
 import LinkFooter from './components/link_footer';
@@ -533,6 +534,7 @@ class UI extends React.PureComponent {
  <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
  {children}
  </SwitchingColumnsArea>
+ <FooterBar />
 
  {me && floatingActionButton}
 

app/javascript/styles/application.scss

@@ -33,6 +33,7 @@
 @import 'gabsocial/components/group-sidebar-panel';
 @import 'gabsocial/components/sidebar-menu';
 @import 'gabsocial/components/status-revisions';
+@import 'gabsocial/components/footer-bar';
 
 @import 'gabsocial/polls';
 @import 'gabsocial/introduction';

app/javascript/styles/gabsocial/components/footer-bar.scss

+.footer-bar {
+ display: block;
+ position: fixed;
+ background: #000;
+ height: 48px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ transition: transform 0.2s ease;
+ overflow: hidden;
+
+ @media screen and (min-width: 895px) {
+ display: none !important;
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ }
+
+ &__link {
+ display: flex;
+ flex: 1 1 auto;
+ margin: 0;
+ min-width: 36px;
+ height: 48px;
+ padding-top: 4px;
+ justify-content: center;
+ color: white;
+ text-decoration: none;
+ border-top: 2px solid transparent;
+
+ &.active {
+ border-top-color: $gab-brand-default;
+ }
+
+ & > span {
+ display: none;
+ }
+ }
+}
\ No newline at end of file