Merge branch 'reorder-nav' into 'develop'

Rearrange navigation

See merge request soapbox-pub/soapbox-fe!818

app/soapbox/components/primary_navigation.js

@@ -63,6 +63,14 @@ class PrimaryNavigation extends React.PureComponent {
             <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
           </NavLink>
 
+          <NavLink key='search' className='btn grouped' to='/search'>
+            <Icon
+              src={require('@tabler/icons/icons/search.svg')}
+              className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/search' })}
+            />
+            <FormattedMessage id='navigation.search' defaultMessage='Search' />
+          </NavLink>
+
           {account && (
             <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
               <IconWithCounter
@@ -98,14 +106,6 @@ class PrimaryNavigation extends React.PureComponent {
             )
           )}
 
-          <NavLink key='search' className='btn grouped' to='/search'>
-            <Icon
-              src={require('@tabler/icons/icons/search.svg')}
-              className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/search' })}
-            />
-            <FormattedMessage id='navigation.search' defaultMessage='Search' />
-          </NavLink>
-
           {(account && isStaff(account)) && (
             <NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
               <IconWithCounter

app/soapbox/components/thumb_navigation.js

@@ -56,6 +56,16 @@ class ThumbNavigation extends React.PureComponent {
           </span>
         </NavLink>
 
+        <NavLink to='/search' className='thumb-navigation__link'>
+          <Icon
+            src={require('@tabler/icons/icons/search.svg')}
+            className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
+          />
+          <span>
+            <FormattedMessage id='navigation.search' defaultMessage='Search' />
+          </span>
+        </NavLink>
+
         {account && (
           <NavLink to='/notifications' className='thumb-navigation__link'>
             <IconWithCounter
@@ -97,16 +107,6 @@ class ThumbNavigation extends React.PureComponent {
           )
         )}
 
-        <NavLink to='/search' className='thumb-navigation__link'>
-          <Icon
-            src={require('@tabler/icons/icons/search.svg')}
-            className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
-          />
-          <span>
-            <FormattedMessage id='navigation.search' defaultMessage='Search' />
-          </span>
-        </NavLink>
-
         {(account && isStaff(account)) && (
           <NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
             <IconWithCounter

app/soapbox/features/ui/components/tabs_bar.js

@@ -143,7 +143,7 @@ class TabsBar extends React.PureComponent {
                 </button>
               </>
             ) : (
-              <div className='flex'>
+              <div className='tabs-bar__unauthenticated'>
                 <Link className='tabs-bar__button button' to='/auth/sign_in'>
                   <FormattedMessage id='account.login' defaultMessage='Log In' />
                 </Link>

app/styles/components/tabs-bar.scss

@@ -47,6 +47,29 @@
     }
   }
 
+  @media screen and (max-width: 450px) {
+    // Move Profile menu to the left on mobile
+    &__split--right {
+      margin: 0;
+      order: -1;
+      width: 100%;
+    }
+
+    &__profile {
+      margin-left: 0;
+    }
+
+    &__unauthenticated {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .tabs-bar__button {
+        margin: 0;
+      }
+    }
+  }
+
   &__search-container {
     display: block;
     width: 351px;