resources/js/components/app/Header.js

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