From 968b001db5565cb9b529aa2da2341fc0c65f8a80 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 19 Feb 2020 12:50:05 +0200
Subject: [PATCH] bring back title to nac bar

---
 .../HorizontalNavBar/HorizontalNavBar.js      | 23 +++++++++++++------
 .../NavBar/HorizontalNavBar/styles.less       | 17 ++++++++++----
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 7c9faf304..5a7a1c58d 100644
--- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -11,7 +11,7 @@ const NotificationsMenu = require('../NotificationsMenu');
 const NavMenu = require('../NavMenu');
 const styles = require('./styles');
 
-const HorizontalNavBar = React.memo(({ className, route, query, backButton, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -32,15 +32,23 @@ const HorizontalNavBar = React.memo(({ className, route, query, backButton, sear
                     </div>
             }
             {
-                searchBar ?
-                    <React.Fragment>
-                        <div className={styles['spacing']} />
-                        <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
-                        <div className={styles['spacing']} />
-                    </React.Fragment>
+                typeof title === 'string' && title.length > 0 ?
+                    <h2 className={styles['title']}>{title}</h2>
                     :
                     null
             }
+            <div className={styles['spacing']} />
+            {
+                searchBar ?
+                    <SearchBar
+                        className={styles['search-bar']}
+                        query={query}
+                        active={route === 'search'}
+                    />
+                    :
+                    null
+            }
+            <div className={styles['spacing']} />
             {
                 addonsButton ?
                     <AddonsButton className={styles['addons-button']} />
@@ -75,6 +83,7 @@ HorizontalNavBar.propTypes = {
     className: PropTypes.string,
     route: PropTypes.string,
     query: PropTypes.string,
+    title: PropTypes.string,
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
     addonsButton: PropTypes.bool,
diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
index 7ef1ec853..089f049bd 100644
--- a/src/common/NavBar/HorizontalNavBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -37,10 +37,19 @@
         }
     }
 
-    .nav-tab-button {
-        flex: none;
-        align-self: stretch;
-        max-width: 11rem;
+    .title {
+        flex: 1;
+        padding: 0 1rem;
+        font-size: 1.1rem;
+        font-style: normal;
+        font-weight: 400;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--color-surfacelighter);
+
+        &+.spacing {
+            display: none;
+        }
     }
 
     .spacing {