+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Container, Nav, Navbar } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import { withTranslation } from 'react-i18next';
+
+import BaseRomButton from './BaseRomButton';
+import Icon from '../common/Icon';
+import LanguageSwitcher from '../common/LanguageSwitcher';
+import { getAvatarUrl } from '../../helpers/User';
+import { withUser } from '../../helpers/UserContext';
+import i18n from '../../i18n';
+
+const Header = ({ doLogout, user }) =>
+ <Navbar id="header" bg="dark" variant="dark">
+ <Container fluid>
+ <LinkContainer to="/">
+ <Navbar.Brand>
+ AoS
+ </Navbar.Brand>
+ </LinkContainer>
+ <Navbar.Text className="ms-auto me-2 button-bar">
+ <BaseRomButton />
+ <LanguageSwitcher />
+ </Navbar.Text>
+ <Nav>
+ {user ?
+ <>
+ <LinkContainer to={`/users/${user.id}`}>
+ <Nav.Link>
+ <img alt="" src={getAvatarUrl(user)} />
+ {user.username}
+ <span className="text-muted">#{user.discriminator}</span>
+ </Nav.Link>
+ </LinkContainer>
+ <Button
+ onClick={doLogout}
+ title={i18n.t('button.logout')}
+ variant="outline-secondary"
+ >
+ <Icon.LOGOUT title="" />
+ </Button>
+ </>
+ : null}
+ </Nav>
+ </Container>
+ </Navbar>
+;
+
+Header.propTypes = {
+ doLogout: PropTypes.func,
+ user: PropTypes.shape({
+ avatar: PropTypes.string,
+ discriminator: PropTypes.string,
+ id: PropTypes.string,
+ username: PropTypes.string,
+ }),
+};
+
+export default withTranslation()(withUser(Header));