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 (
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 (
-