simle-chat

1
import React from 'react';
2
import { Navbar, Button } from 'react-bootstrap';
3
import { useNavigate } from 'react-router-dom';
4
import { useTranslation } from 'react-i18next';
5

6
import useAuth from '../hooks/index';
7
import routes from '../routes';
8
import logoImg from '../assets/logo120-40.png';
9

10
const Header = () => {
11
  const navigate = useNavigate();
12
  const { t } = useTranslation();
13
  const { user, logOut } = useAuth();
14

15
  const handleLogout = () => {
16
    logOut();
17
    navigate(routes.chatPagePath());
18
  };
19

20
  return (
21
    <Navbar expand="lg" className="shadow-sm bg-white">
22
      <div className="container">
23
        <Navbar.Brand href="/" title={t('header.logoText')}>
24
          <span className="visually-hidden">{t('header.logoText')}</span>
25
          <img src={logoImg} alt="Logo" />
26
        </Navbar.Brand>
27
        {user && (
28
        <Button
29
          type="submit"
30
          variant="primary"
31
          onClick={handleLogout}
32
        >
33
          {t('header.button')}
34
        </Button>
35
        )}
36
      </div>
37
    </Navbar>
38
  );
39
};
40

41
export default Header;
42