]> git.localhorst.tv Git - alttp.git/blob - resources/js/app/Header.js
try to respond more appropriately
[alttp.git] / resources / js / app / Header.js
1 import React from 'react';
2 import { Container, Nav, Navbar } from 'react-bootstrap';
3 import { LinkContainer } from 'react-router-bootstrap';
4 import { useLocation } from 'react-router-dom';
5 import { useTranslation } from 'react-i18next';
6
7 import LanguageSwitcher from './LanguageSwitcher';
8 import User from './User';
9 import Icon from '../components/common/Icon';
10
11 const Header = () => {
12         const { pathname } = useLocation();
13         const { t } = useTranslation();
14
15         return <Navbar id="header" bg="dark" expand="md" variant="dark">
16                 <Container fluid>
17                         <LinkContainer to="/">
18                                 <Navbar.Brand>
19                                         ALttP
20                                 </Navbar.Brand>
21                         </LinkContainer>
22                         <Navbar.Toggle aria-controls="header-nav" label={t('button.menu')}>
23                                 <Icon.MENU title="" />
24                         </Navbar.Toggle>
25                         <Navbar.Collapse id="header-nav">
26                                 <Nav activeKey={pathname}>
27                                         <LinkContainer to="/tournaments/6">
28                                                 <Nav.Link href="/tournaments/6">
29                                                         ALttPR Weekly
30                                                 </Nav.Link>
31                                         </LinkContainer>
32                                 </Nav>
33                                 <Nav activeKey={pathname} className="ms-auto">
34                                         <LinkContainer to="/tech">
35                                                 <Nav.Link href="/tech">
36                                                         {t('menu.tech')}
37                                                 </Nav.Link>
38                                         </LinkContainer>
39                                         <LinkContainer to="/map/lw">
40                                                 <Nav.Link href="/map/lw">
41                                                         {t('menu.map')}
42                                                 </Nav.Link>
43                                         </LinkContainer>
44                                 </Nav>
45                                 <div className="d-flex align-items-center">
46                                         <Navbar.Text className="mx-2">
47                                                 <LanguageSwitcher />
48                                         </Navbar.Text>
49                                         <User />
50                                 </div>
51                         </Navbar.Collapse>
52                 </Container>
53         </Navbar>;
54 };
55
56 export default Header;