Merge pull request #906 from sferra/fix-collapse-sidebar-button-not-visible

Align notification bar with the navigation bar

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>
     )
   }
 }

browser/components/RealtimeNotification.styl

@@ -3,21 +3,21 @@
   font-size 12px
   position absolute
   bottom 0px
+  right 0px
   background-color #EBEBEB
-  width 100vw
   height 30px
+  line-height 30px
   text-align center
 
 .notification-link
+  display inline-block
+  line-height normal
   text-decoration none
   color #282A36
   border 1px solid #6FA8E6
   background-color alpha(#6FA8E6, 0.2)
   padding 3px 9px
   border-radius 2px
-  position absolute
-  bottom 4px
-  margin-left -10%
   transition 0.2s
   &:hover
     color #1378BD

browser/main/Main.js

@@ -21,6 +21,7 @@ function focused () {
 }
 
 class Main extends React.Component {
+
   constructor (props) {
     super(props)
 
@@ -189,6 +190,17 @@ class Main extends React.Component {
   render () {
     let { config } = this.props
 
+    // the width of the navigation bar when it is folded/collapsed
+    const foldedNavigationWidth = 44
+    let notificationBarOffsetLeft
+    if (this.state.fullScreen) {
+      notificationBarOffsetLeft = 0
+    } else if (config.isSideNavFolded) {
+      notificationBarOffsetLeft = foldedNavigationWidth
+    } else {
+      notificationBarOffsetLeft = this.state.navWidth
+    }
+
     return (
       <div
         className='Main'
@@ -217,7 +229,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 +268,9 @@ class Main extends React.Component {
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
-        <RealtimeNotification />
+        <RealtimeNotification
+          style={{left: notificationBarOffsetLeft}}
+        />
       </div>
     )
   }