Add settings pane

1 files changed, 22 insertions, 3 deletions

diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index ce5d039f1f..decf561f5d 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { If } from 'react-if';
 import Enum from '../lib/enum';
 
 export default class HeaderBar extends Component {
@@ -7,7 +8,10 @@ export default class HeaderBar extends Component {
   static Style = Enum('default', 'error', 'success');
 
   static propTypes = {
-    style: PropTypes.string
+    style: PropTypes.string,
+    hidden: PropTypes.bool,
+    showSettings: PropTypes.bool,
+    onSettings: PropTypes.func
   };
 
   render() {
@@ -18,10 +22,25 @@ export default class HeaderBar extends Component {
       containerClass.push(`headerbar--style-${style}`);
     }
 
+    if(this.props.hidden) {
+      containerClass.push('headerbar--hidden');
+    }
+
     return (
       <div className={ containerClass.join(' ') }>
-        <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
-        <h2 className="headerbar__title">MULLVAD VPN</h2>
+        <If condition={ !this.props.hidden }>
+          <div className="headerbar__container">
+            <div className="headerbar__left">
+              <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
+              <h2 className="headerbar__title">MULLVAD VPN</h2>
+            </div>
+            <If condition={ !!this.props.showSettings }>
+              <div className="headerbar__right">
+                <button className="headerbar__settings" onClick={ this.props.onSettings } />
+              </div>
+            </If>
+          </div>
+        </If>
       </div>
     );
   }