From 357dbe08c4d5fa47a11b8f3bc327d12ea01b8d13 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 30 May 2017 15:52:35 +0300
Subject: [PATCH] TopbarDesktop should get visibility factor from Topbar.

---
 .../TopbarDesktop/TopbarDesktop.css           | 30 ++++++++-----------
 src/containers/Topbar/Topbar.css              |  8 +++++
 src/containers/Topbar/Topbar.js               | 14 +++++----
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css
index 9a57b172..67966f44 100644
--- a/src/components/TopbarDesktop/TopbarDesktop.css
+++ b/src/components/TopbarDesktop/TopbarDesktop.css
@@ -2,26 +2,22 @@
 
 /* Desktop */
 .root {
-  display: none;
+  /* Size */
+  width: 100%;
+  height: 72px;
 
-  @media (min-width: 768px) {
-    /* Size */
-    width: 100%;
-    height: 72px;
+  /* Layout for child components */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0 36px;
 
-    /* Layout for child components */
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: baseline;
-    padding: 0 36px;
+  /* fill */
+  background-color: var(--matterColorLight);
 
-    /* fill */
-    background-color: var(--matterColorLight);
-
-    /* shadows */
-    box-shadow: var(--boxShadowLight);
-  }
+  /* shadows */
+  box-shadow: var(--boxShadowLight);
 }
 
 /* Compose text label items on top of this */
diff --git a/src/containers/Topbar/Topbar.css b/src/containers/Topbar/Topbar.css
index 9dc6cd53..f93129f5 100644
--- a/src/containers/Topbar/Topbar.css
+++ b/src/containers/Topbar/Topbar.css
@@ -61,3 +61,11 @@
 .searchForm {
   margin: 2rem;
 }
+
+.desktop {
+  display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+  }
+}
diff --git a/src/containers/Topbar/Topbar.js b/src/containers/Topbar/Topbar.js
index 41b182b0..cc7dbd8c 100644
--- a/src/containers/Topbar/Topbar.js
+++ b/src/containers/Topbar/Topbar.js
@@ -135,12 +135,14 @@ class TopbarComponent extends Component {
             <img src={searchIcon} alt={intl.formatMessage({ id: 'Topbar.searchIcon' })} />
           </FlatButton>
         </div>
-        <TopbarDesktop
-          currentUserHasListings={currentUserHasListings}
-          intl={intl}
-          isAuthenticated={isAuthenticated}
-          name={name}
-        />
+        <div className={css.desktop}>
+          <TopbarDesktop
+            currentUserHasListings={currentUserHasListings}
+            intl={intl}
+            isAuthenticated={isAuthenticated}
+            name={name}
+          />
+        </div>
         <Modal
           isOpen={isMobileMenuOpen}
           onClose={this.handleMobileMenuClose}