Progress on refactor

Update files paths, components

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

@@ -0,0 +1,58 @@
+import { NavLink, withRouter } from 'react-router-dom';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import NotificationCounter from '../notification_counter';
+import { me } from '../../initial_state';
+
+import './footer_bar.scss';
+
+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'/>
+    <NotificationCounter />
+    <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>
+    );
+  }
+}

app/javascript/gabsocial/components/footer_bar/footer_bar.scss

@@ -0,0 +1,45 @@
+.footer-bar {
+  display: block;
+  position: fixed;
+  background: #000;
+  height: 58px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: transform 0.2s ease;
+  overflow: hidden;
+  padding-bottom: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  @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: 58px;
+    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;
+    }
+  }
+}

app/javascript/gabsocial/components/footer_bar/index.js

@@ -0,0 +1 @@
+export { default } from './footer_bar';