diff --git a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx index 632ed0217b..2e1c3f3b6d 100644 --- a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx +++ b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx @@ -4,6 +4,7 @@ import kolideLogo from '../../../../assets/images/kolide-logo.svg'; class OrgLogoIcon extends Component { static propTypes = { + className: PropTypes.string, src: PropTypes.string.isRequired, }; @@ -40,12 +41,14 @@ class OrgLogoIcon extends Component { } render () { + const { className } = this.props; const { imageSrc } = this.state; const { onError } = this; return ( Organization Logo diff --git a/frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx b/frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx index 948c707a29..35da9e4fac 100644 --- a/frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx +++ b/frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx @@ -2,11 +2,10 @@ import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; import configInterface from 'interfaces/config'; -import userInterface from 'interfaces/user'; import Icon from 'components/icons/Icon'; - -import kolideLogo from '../../../../assets/images/kolide-logo.svg'; -import UserMenu from './UserMenu'; +import OrgLogoIcon from 'components/icons/OrgLogoIcon'; +import userInterface from 'interfaces/user'; +import UserMenu from 'components/side_panels/SiteNavHeader/UserMenu'; class SiteNavHeader extends Component { static propTypes = { @@ -19,36 +18,47 @@ class SiteNavHeader extends Component { constructor (props) { super(props); - this.state = { - userMenuOpened: false, - }; + this.state = { userMenuOpened: false }; } componentDidMount = () => { const { document } = global; const { closeUserMenu } = this; + document.addEventListener('mousedown', closeUserMenu, false); } - closeUserMenu = (evt) => { + setHeaderNav = (ref) => { + this.headerNav = ref; + + return false; + } + + closeUserMenu = ({ target }) => { const { headerNav } = this; - if (headerNav && !headerNav.contains(evt.target)) { + if (headerNav && !headerNav.contains(target)) { this.setState({ userMenuOpened: false }); } + + return false; } toggleUserMenu = (evt) => { evt.preventDefault(); + const { userMenuOpened } = this.state; this.setState({ userMenuOpened: !userMenuOpened }); + + return false; } render () { const { config: { org_name: orgName, + org_logo_url: orgLogoURL, }, onLogoutUser, onRedirectTo, @@ -56,7 +66,7 @@ class SiteNavHeader extends Component { } = this.props; const { userMenuOpened } = this.state; - const { toggleUserMenu } = this; + const { setHeaderNav, toggleUserMenu } = this; const { enabled, username } = user; const headerBaseClass = 'site-nav-header'; @@ -75,13 +85,9 @@ class SiteNavHeader extends Component { return (
-