fix the nav

app/javascript/mastodon/features/ui/components/header.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, /* defineMessages, */ injectIntl } from 'react-intl';
 
 import { Link, withRouter } from 'react-router-dom';
 
@@ -10,10 +10,12 @@ import { connect } from 'react-redux';
 import { openModal } from 'mastodon/actions/modal';
 import { fetchServer } from 'mastodon/actions/server';
 import { Avatar } from 'mastodon/components/avatar';
-import { Icon } from 'mastodon/components/icon';
+//import { Icon } from 'mastodon/components/icon';
 import { WordmarkLogo, SymbolLogo } from 'mastodon/components/logo';
 import { registrationsOpen, me, sso_redirect } from 'mastodon/initial_state';
 
+import NavigationPanel from './navigation_panel';
+
 const Account = connect(state => ({
   account: state.getIn(['accounts', me]),
 }))(({ account }) => (
@@ -22,9 +24,9 @@ const Account = connect(state => ({
   </Link>
 ));
 
-const messages = defineMessages({
-  search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
-});
+//const messages = defineMessages({
+//  search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
+//});
 
 const mapStateToProps = (state) => ({
   signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
@@ -60,14 +62,13 @@ class Header extends PureComponent {
 
   render () {
     const { signedIn } = this.context.identity;
-    const { location, openClosedRegistrationsModal, signupUrl, intl } = this.props;
+    const { location, openClosedRegistrationsModal, signupUrl, /* intl */ } = this.props;
 
     let content;
 
     if (signedIn) {
       content = (
         <>
-          {location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
           {location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
           <Account />
         </>
@@ -112,6 +113,7 @@ class Header extends PureComponent {
         </Link>
 
         <div className='ui__header__links'>
+          <NavigationPanel />
           {content}
         </div>
       </div>

app/javascript/styles/application.scss

@@ -24,3 +24,31 @@
 @import 'mastodon/rtl';
 @import 'mastodon/accessibility';
 @import 'mastodon/rich_text';
+
+// The following "fixes" the mobile layout
+// in conjunction with the edits in `features/ui/components/header.jsx`
+// NOTE: $no-gap-breakpoint is when the UI becomes 3 columns
+.navigation-panel__logo,
+.ui__header__logo {
+  display: none;
+}
+@media screen and (max-width: $no-gap-breakpoint) {
+  .columns-area__panels__pane--navigational,
+  .navigation-panel__sign-in-banner,
+  .navigation-panel__legal > hr,
+  .column-link > span {
+    display: none;
+  }
+
+  .navigation-panel {
+    flex-direction: row;
+  }
+
+  .ui__header__links {
+    flex-shrink: unset;
+  }
+
+  .ui__header {
+    justify-content: center;
+  }
+}