covid19-tracker-reactJS/src/components/Nav.js at master · lanru2001/covid19-tracker-reactJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from 'react';
import {
  Navbar,
  NavbarBrand,
  NavItem,
  NavLink,
  Nav,
  Container
} from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLungsVirus } from '@fortawesome/free-solid-svg-icons';

const TopBar = props => {
  return (
    <div>
      <Navbar color='light' light expand='md' className='fixed-top'>
        <Container fluid={true}>
          <NavbarBrand
            style={{ marginLeft: '20px', marginTop: '-10px' }}
            href='/'
          >
            <FontAwesomeIcon
              icon={faLungsVirus}
              style={{ color: 'red', fontSize: '30px' }}
            />{' '}
            COVID-19 (Coronavirus) Tracker
          </NavbarBrand>
          <Nav navbar className=' float-right'>
            <NavItem>
              <NavLink href='/'>
                <h6>Home</h6>
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink href='/about-covid-19'>
                <h6>What is COVID-19?</h6>
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink href='/prevention'>
                <h6>Prevention</h6>
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink href='/about'>
                <h6>About</h6>
              </NavLink>
            </NavItem>
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
};

export default TopBar;