From 875f7a925cfcd3eded4dfc26c2fb23e96020ed3a Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 22 Apr 2019 18:40:38 +0300
Subject: [PATCH] nav tabs count ensured regardless of back button

---
 src/common/NavBar/NavBar.js   | 20 +++++++++++---------
 src/common/NavBar/styles.less | 14 +++++++++++---
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index 1dcfeb56a..4a4a8bd47 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -22,15 +22,17 @@ const NavBar = ({ backButton, tabs, title, searchInput, userMenu }) => (
         }
         {
             tabs.length > 0 ?
-                tabs.map(({ href, icon, label }) => (
-                    <NavBarButton
-                        key={href}
-                        className={styles['nav-bar-button']}
-                        href={href}
-                        icon={icon}
-                        label={label}
-                    />
-                ))
+                <div className={styles['tabs-container']}>
+                    {tabs.map(({ href, icon, label }) => (
+                        <NavBarButton
+                            key={href}
+                            className={styles['nav-bar-button']}
+                            href={href}
+                            icon={icon}
+                            label={label}
+                        />
+                    ))}
+                </div>
                 :
                 <h2 className={styles['title']}>{title}</h2>
         }
diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less
index 3e3fecb0e..d1569c4b7 100644
--- a/src/common/NavBar/styles.less
+++ b/src/common/NavBar/styles.less
@@ -2,9 +2,11 @@
     --nav-bar-height: 44px;
     font-size: 16px;
 
-    .nav-bar-button {
-        &:nth-of-type(n+4) {
-            display: none;
+    .tabs-container {
+        .nav-bar-button {
+            &:nth-child(n+5) {
+                display: none;
+            }
         }
     }
 }
@@ -17,6 +19,12 @@
     background-color: var(--color-secondarydark);
     overflow: hidden;
 
+    .tabs-container {
+        flex: none;
+        display: flex;
+        flex-direction: row;
+    }
+
     .nav-bar-button {
         max-width: calc(var(--nav-bar-height) * 3.5);
         height: var(--nav-bar-height);