From 897f65cf7222165c367a840f9d63b9d85320640f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 23 Oct 2021 14:09:17 -0500
Subject: [PATCH 1/3] PrimaryNavigation, ThumbNavigation: move Search to after
 Home

---
 app/soapbox/components/primary_navigation.js | 16 ++++++++--------
 app/soapbox/components/thumb_navigation.js   | 20 ++++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/components/primary_navigation.js b/app/soapbox/components/primary_navigation.js
index c9c3f915e..b9c1c6e72 100644
--- a/app/soapbox/components/primary_navigation.js
+++ b/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
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index 29ef4b270..06b27161d 100644
--- a/app/soapbox/components/thumb_navigation.js
+++ b/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

From 6d7ce6ffd4252737e8d86947be001a91285a1965 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 23 Oct 2021 14:14:56 -0500
Subject: [PATCH 2/3] TabsBar: move Profile menu to the left on mobile

---
 app/styles/components/tabs-bar.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index c8c090aca..372233026 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -44,6 +44,16 @@
     &--right {
       margin-left: auto;
       align-items: center;
+
+      // Move Profile menu to the left on mobile
+      @media screen and (max-width: 450px) {
+        margin: 0;
+        order: -1;
+
+        .tabs-bar__profile {
+          margin-left: 0;
+        }
+      }
     }
   }
 

From 47c68014d038a8783302fd2d6703ad7325f313b5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 23 Oct 2021 14:29:26 -0500
Subject: [PATCH 3/3] TabsBar: fix unauthenticated buttons on mobile

---
 .../features/ui/components/tabs_bar.js        |  2 +-
 app/styles/components/tabs-bar.scss           | 27 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index b7864d1ef..a4b1d5bb5 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/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>
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 372233026..b792b8fa9 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -44,15 +44,28 @@
     &--right {
       margin-left: auto;
       align-items: center;
+    }
+  }
 
-      // Move Profile menu to the left on mobile
-      @media screen and (max-width: 450px) {
+  @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;
-        order: -1;
-
-        .tabs-bar__profile {
-          margin-left: 0;
-        }
       }
     }
   }