mirror of
https://github.com/fleetdm/fleet
synced 2026-05-22 16:39:01 +00:00
9750a81f0e
- Explicitly import all icon png assets in the component files they're referenced. Instead of creating a relative path to the icon image asset in the `<Icon />` component. This allows icon assets to be independent of any custom url prefix and fixes #193. In addition, eslint now catches all unresolved paths to image assets. - Remove the `<Icon />` component - Remove `icon_name.js` - Add `<Link />` component and PATHS to 404 and 500 pages. These pages now work with a custom URL prefix specified. - Remove all icons from the Hosts side panel. These changes are part of the Hosts UI #162.
61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
import PATHS from 'router/paths';
|
|
|
|
import SettingsIcon from '../../../../assets/images/icon-main-settings-white-24x24@2x.png';
|
|
import HelpIcon from '../../../../assets/images/icon-main-help-white-24x24@2x.png';
|
|
import LogoutIcon from '../../../../assets/images/icon-main-logout-white-24x24@2x.png';
|
|
|
|
class UserMenu extends Component {
|
|
static propTypes = {
|
|
pathname: PropTypes.string,
|
|
onLogout: PropTypes.func,
|
|
onNavItemClick: PropTypes.func,
|
|
user: PropTypes.shape({
|
|
gravatarURL: PropTypes.string,
|
|
name: PropTypes.string,
|
|
username: PropTypes.string.isRequired,
|
|
position: PropTypes.string,
|
|
}).isRequired,
|
|
};
|
|
|
|
static defaultProps = {
|
|
isOpened: false,
|
|
};
|
|
|
|
render () {
|
|
const { pathname, onLogout, onNavItemClick } = this.props;
|
|
|
|
const baseClass = 'user-menu';
|
|
const userMenuClass = classnames(baseClass);
|
|
|
|
let settingsActive;
|
|
if (pathname.replace('/', '') === 'settings') settingsActive = true;
|
|
const settingsNavItemBaseClass = classnames(
|
|
`${baseClass}__nav-item`,
|
|
{
|
|
[`${baseClass}__nav-item--active`]: settingsActive,
|
|
},
|
|
);
|
|
|
|
const iconClasses = classnames(
|
|
'icon',
|
|
);
|
|
|
|
return (
|
|
<div className={userMenuClass}>
|
|
<nav className={`${baseClass}__nav`}>
|
|
<ul className={`${baseClass}__nav-list`}>
|
|
<li className={settingsNavItemBaseClass}><a href="#settings" onClick={onNavItemClick(PATHS.USER_SETTINGS)}><img src={SettingsIcon} alt="settings icon" className={iconClasses} /><span>Account</span></a></li>
|
|
<li className={`${baseClass}__nav-item`}><a href="https://github.com/fleetdm/fleet/blob/master/docs/README.md" target="_blank" rel="noreferrer"><img src={HelpIcon} alt="help icon" className={iconClasses} /><span>Help</span></a></li>
|
|
<li className={`${baseClass}__nav-item`}><a href="#logout" onClick={onLogout}><img src={LogoutIcon} alt="logout icon" className={iconClasses} /><span>Log out</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default UserMenu;
|