From 620aff71073b861d13bddf11d047f8c8d388487c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 5 Oct 2021 13:29:52 -0500
Subject: [PATCH] PrimaryNavigation: add Search button

---
 app/soapbox/components/primary_navigation.js | 8 ++++++++
 app/styles/components/icon.scss              | 2 +-
 app/styles/navigation.scss                   | 6 ++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/primary_navigation.js b/app/soapbox/components/primary_navigation.js
index af84b6dc3..8aed7a09d 100644
--- a/app/soapbox/components/primary_navigation.js
+++ b/app/soapbox/components/primary_navigation.js
@@ -69,6 +69,14 @@ class PrimaryNavigation extends React.PureComponent {
             <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
           </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>
+
           {(features.chats && account) && <NavLink key='chats' className='btn grouped' to='/chats' data-preview-title-id='column.chats'>
             <IconWithCounter
               src={require('@tabler/icons/icons/messages.svg')}
diff --git a/app/styles/components/icon.scss b/app/styles/components/icon.scss
index 1c3e07400..118d39420 100644
--- a/app/styles/components/icon.scss
+++ b/app/styles/components/icon.scss
@@ -13,7 +13,7 @@
 
   &--active {
     svg.icon-tabler-search {
-      stroke-width: 2px;
+      stroke-width: 2.3px;
     }
 
     svg.icon-tabler-bell,
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index d982d3fa6..c9498aeff 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -16,6 +16,12 @@
         svg.icon-tabler {
           stroke-width: 1.5px;
         }
+
+        &--active {
+          svg.icon-tabler-search {
+            stroke-width: 2.5px;
+          }
+        }
       }
 
       &::before {