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;