Add MenuBar component

4 files changed, 97 insertions, 0 deletions

diff --git a/ui/app/components/menu-bar/index.js b/ui/app/components/menu-bar/index.js
new file mode 100644
index 000000000..c5760847f
--- /dev/null
+++ b/ui/app/components/menu-bar/index.js
@@ -0,0 +1 @@
+export { default } from './menu-bar.container'
diff --git a/ui/app/components/menu-bar/index.scss b/ui/app/components/menu-bar/index.scss
new file mode 100644
index 000000000..f699f4090
--- /dev/null
+++ b/ui/app/components/menu-bar/index.scss
@@ -0,0 +1,23 @@
+.menu-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-bottom: 16px;
+  padding: 5px;
+  border-bottom: 1px solid #e5e5e5;
+
+  &__sidebar-button {
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 10px;
+  }
+
+  &__open-in-browser {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+  }
+}
diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js
new file mode 100644
index 000000000..eee9feebb
--- /dev/null
+++ b/ui/app/components/menu-bar/menu-bar.component.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Tooltip from '../tooltip'
+import SelectedAccount from '../selected-account'
+
+export default class MenuBar extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    hideSidebar: PropTypes.func,
+    isMascara: PropTypes.bool,
+    sidebarOpen: PropTypes.bool,
+    showSidebar: PropTypes.func,
+  }
+
+  render () {
+    const { t } = this.context
+    const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props
+
+    return (
+      <div className="menu-bar">
+        <Tooltip
+          title={t('menu')}
+          position="bottom"
+        >
+          <div
+            className="fa fa-bars menu-bar__sidebar-button"
+            onClick={() => sidebarOpen ? hideSidebar() : showSidebar()}
+          />
+        </Tooltip>
+        <SelectedAccount />
+        {
+          !isMascara && (
+            <Tooltip
+              title={t('openInTab')}
+              position="bottom"
+            >
+              <div
+                className="menu-bar__open-in-browser"
+                onClick={() => global.platform.openExtensionInBrowser()}
+              >
+                <img src="images/popout.svg" />
+              </div>
+            </Tooltip>
+          )
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/menu-bar/menu-bar.container.js b/ui/app/components/menu-bar/menu-bar.container.js
new file mode 100644
index 000000000..2bd0ed6ed
--- /dev/null
+++ b/ui/app/components/menu-bar/menu-bar.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import MenuBar from './menu-bar.component'
+import { showSidebar, hideSidebar } from '../../actions'
+
+const mapStateToProps = state => {
+  const { appState: { sidebarOpen, isMascara } } = state
+
+  return {
+    sidebarOpen,
+    isMascara,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showSidebar: () => dispatch(showSidebar()),
+    hideSidebar: () => dispatch(hideSidebar()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MenuBar)