Added settings toggle to move the navbar at the bottom in mobile view (#93)

app/javascript/glitch/components/local_settings/page/index.js

@@ -53,6 +53,14 @@ export default class LocalSettingsPage extends React.PureComponent {
         >
           <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
         </LocalSettingsPageItem>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['navbar_under']}
+          id='mastodon-settings--navbar_under'
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' />
+        </LocalSettingsPageItem>
       </div>
     ),
     ({ onChange, settings }) => (

app/javascript/glitch/locales/en.json

@@ -26,6 +26,7 @@
   "settings.media_fullwidth": "Full-width media previews",
   "settings.preferences": "User preferences",
   "settings.wide_view": "Wide view (Desktop mode only)",
+  "settings.navbar_under": "Navbar at the bottom (Mobile only)",
   "status.collapse": "Collapse",
   "status.uncollapse": "Uncollapse",
   "notification.markForDeletion": "Mark for deletion"

app/javascript/glitch/reducers/local_settings.js

@@ -51,6 +51,7 @@ These are only used if no previously-saved values exist.
 const initialState = ImmutableMap({
   layout    : 'auto',
   stretch   : true,
+  navbar_under : false,
   collapsed : ImmutableMap({
     enabled     : true,
     auto        : ImmutableMap({

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

@@ -45,6 +45,7 @@ const mapStateToProps = state => ({
   systemFontUi: state.getIn(['meta', 'system_font_ui']),
   layout: state.getIn(['local_settings', 'layout']),
   isWide: state.getIn(['local_settings', 'stretch']),
+  navbarUnder: state.getIn(['local_settings', 'navbar_under']),
   isComposing: state.getIn(['compose', 'is_composing']),
 });
 
@@ -57,6 +58,7 @@ export default class UI extends React.PureComponent {
     layout: PropTypes.string,
     isWide: PropTypes.bool,
     systemFontUi: PropTypes.bool,
+    navbarUnder: PropTypes.bool,
     isComposing: PropTypes.bool,
   };
 
@@ -167,7 +169,7 @@ export default class UI extends React.PureComponent {
 
   render () {
     const { width, draggingOver } = this.state;
-    const { children, layout, isWide } = this.props;
+    const { children, layout, isWide, navbarUnder } = this.props;
 
     const columnsClass = layout => {
       switch (layout) {
@@ -187,7 +189,7 @@ export default class UI extends React.PureComponent {
 
     return (
       <div className={className} ref={this.setRef}>
-        <TabsBar />
+        {navbarUnder ? null : (<TabsBar />)}
         <ColumnsAreaContainer singleColumn={isMobile(width, layout)}>
           <WrappedSwitch>
             <Redirect from='/' to='/getting-started' exact />
@@ -218,6 +220,7 @@ export default class UI extends React.PureComponent {
           </WrappedSwitch>
         </ColumnsAreaContainer>
         <NotificationsContainer />
+        {navbarUnder ? (<TabsBar />) : null}
         <LoadingBarContainer className='loading-bar' />
         <ModalContainer />
         <UploadArea active={draggingOver} onClose={this.closeUploadModal} />