aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/menu-bar/menu-bar.component.js
blob: 29c56953d167afdf115ace46c2689c2a0345cc59 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Tooltip from '../tooltip'
import SelectedAccount from '../selected-account'
import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'

export default class MenuBar extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
    metricsEvent: PropTypes.func,
  }

  static propTypes = {
    hideSidebar: PropTypes.func,
    sidebarOpen: PropTypes.bool,
    showSidebar: PropTypes.func,
  }

  state = { accountDetailsMenuOpen: false }

  render () {
    const { t } = this.context
    const { sidebarOpen, hideSidebar, showSidebar } = this.props
    const { accountDetailsMenuOpen } = this.state

    return (
      <div className="menu-bar">
        <Tooltip
          title={t('menu')}
          position="bottom"
        >
          <div
            className="fa fa-bars menu-bar__sidebar-button"
            onClick={() => {
              this.context.metricsEvent({
                eventOpts: {
                  category: 'Navigation',
                  action: 'Home',
                  name: 'Opened Hamburger',
                },
              })
              sidebarOpen ? hideSidebar() : showSidebar()
            }}
          />
        </Tooltip>
        <SelectedAccount />

        <Tooltip
          title={t('accountOptions')}
          position="bottom"
        >
          <div
            className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
            onClick={() => {
              this.context.metricsEvent({
                eventOpts: {
                  category: 'Navigation',
                  action: 'Home',
                  name: 'Opened Account Options',
                },
              })
              this.setState({ accountDetailsMenuOpen: true })
            }}
          >
          </div>
        </Tooltip>

        {
          accountDetailsMenuOpen && (
            <AccountDetailsDropdown
              className="menu-bar__account-details-dropdown"
              onClose={() => this.setState({ accountDetailsMenuOpen: false })}
            />
          )
        }
      </div>
    )
  }
}