webapp

1
import React, { useState, useEffect } from 'react';
2
import { Button } from './Button';
3
import { Link } from 'react-router-dom';
4
import './Navbar.css';
5

6
function Navbar() {
7
  const [click, setClick] = useState(false);
8
  const [button, setButton] = useState(true);
9

10
  const handleClick = () => setClick(!click);
11
  const closeMobileMenu = () => setClick(false);
12

13
  const showButton = () => {
14
    if (window.innerWidth <= 960) {
15
      setButton(false);
16
    } else {
17
      setButton(true);
18
    }
19
  };
20

21
  useEffect(() => {
22
    showButton();
23
  }, []);
24

25
  window.addEventListener('resize', showButton);
26

27
  return (
28
    <>
29
      <nav className='navbar'>
30
        <div className='navbar-container'>
31
          <Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
32
            TRVL
33
            <i class='fab fa-typo3' />
34
          </Link>
35
          <div className='menu-icon' onClick={handleClick}>
36
            <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
37
          </div>
38
          <ul className={click ? 'nav-menu active' : 'nav-menu'}>
39
            <li className='nav-item'>
40
              <Link to='/' className='nav-links' onClick={closeMobileMenu}>
41
                Home
42
              </Link>
43
            </li>
44
            <li className='nav-item'>
45
              <Link
46
                to='/services'
47
                className='nav-links'
48
                onClick={closeMobileMenu}
49
              >
50
                Services
51
              </Link>
52
            </li>
53
            <li className='nav-item'>
54
              <Link
55
                to='/products'
56
                className='nav-links'
57
                onClick={closeMobileMenu}
58
              >
59
                Products
60
              </Link>
61
            </li>
62

63
            <li>
64
              <Link
65
                to='/sign-up'
66
                className='nav-links-mobile'
67
                onClick={closeMobileMenu}
68
              >
69
                Sign Up
70
              </Link>
71
            </li>
72
          </ul>
73
          {button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}
74
        </div>
75
      </nav>
76
    </>
77
  );
78
}
79

80
export default Navbar;
81