import React from 'react';
import { Button, Container, Nav, Navbar } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
import Icon from './Icon';
+import LanguageSwitcher from './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">
+const Header = ({ doLogout, user }) => {
+ const { pathname } = useLocation();
+ const { t } = useTranslation();
+
+ return <Navbar id="header" bg="dark" variant="dark">
<Container fluid>
<LinkContainer to="/">
<Navbar.Brand>
ALttP
</Navbar.Brand>
</LinkContainer>
- <Nav className="ms-auto">
+ <Nav activeKey={pathname}>
+ <LinkContainer to="/tournaments/6">
+ <Nav.Link href="/tournaments/6">
+ ALttPR Weekly
+ </Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/tournaments/5">
+ <Nav.Link href="/tournaments/5">
+ Super Metroid
+ </Nav.Link>
+ </LinkContainer>
+ </Nav>
+ <Nav activeKey={pathname} className="ms-auto">
+ <LinkContainer to="/tech">
+ <Nav.Link href="/tech">
+ {t('menu.tech')}
+ </Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/map">
+ <Nav.Link href="/map">
+ {t('menu.map')}
+ </Nav.Link>
+ </LinkContainer>
+ </Nav>
+ <Navbar.Text className="mx-2">
+ <LanguageSwitcher />
+ </Navbar.Text>
+ <Nav>
{user ?
<>
<LinkContainer to={`/users/${user.id}`}>
</LinkContainer>
<Button
onClick={doLogout}
- title={i18n.t('button.logout')}
+ title={t('button.logout')}
variant="outline-secondary"
>
<Icon.LOGOUT title="" />
</Button>
</>
:
- <Button href="/login" variant="discord">
+ <Button
+ href="/login"
+ onClick={() => {
+ if (location.pathname.length > 1) {
+ localStorage.setItem('returnPath', location.pathname.substr(1));
+ }
+ }}
+ variant="discord"
+ >
<Icon.DISCORD />
{' '}
- {i18n.t('button.login')}
+ {t('button.login')}
</Button>
}
</Nav>
</Container>
- </Navbar>
-;
+ </Navbar>;
+};
Header.propTypes = {
doLogout: PropTypes.func,
}),
};
-export default withTranslation()(withUser(Header));
+export default withUser(Header);