From 80c13f7c4f90c597ecf236c1cd632940d0996214 Mon Sep 17 00:00:00 2001
From: Cristian Beskid <schizosfera@gmail.com>
Date: Mon, 25 Sep 2017 17:17:34 +0200
Subject: [PATCH] Align notification bar with the navigation bar

---
 browser/components/RealtimeNotification.js |  2 +-
 browser/main/Main.js                       | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/browser/components/RealtimeNotification.js b/browser/components/RealtimeNotification.js
index dcd04586..3a6bcc27 100644
--- a/browser/components/RealtimeNotification.js
+++ b/browser/components/RealtimeNotification.js
@@ -45,7 +45,7 @@ class RealtimeNotification extends React.Component {
     : ''
 
     return (
-      <div styleName='notification-area'>{link}</div>
+      <div styleName='notification-area' style={this.props.style}>{link}</div>
     )
   }
 }
diff --git a/browser/main/Main.js b/browser/main/Main.js
index ed5904d5..e08e1488 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -20,7 +20,11 @@ function focused () {
   mixpanel.track('MAIN_FOCUSED')
 }
 
+// the width of the navigation bar when it is folded/collapsed
+const foldedNavigationWidth = 44;
+
 class Main extends React.Component {
+
   constructor (props) {
     super(props)
 
@@ -217,7 +221,7 @@ class Main extends React.Component {
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           id='main-body'
           ref='body'
-          style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
+          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
         >
           <TopBar style={{width: this.state.listWidth}}
             {..._.pick(this.props, [
@@ -256,7 +260,9 @@ class Main extends React.Component {
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
-        <RealtimeNotification />
+        <RealtimeNotification
+          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
+        />
       </div>
     )
   }