text: import React, { useState } from 'react';
  import './styles.css';
  
  import { FaBars } from 'react-icons/fa';
  
  function NavBar() {
    const [navbarOpened, setnavbarOpened] = useState(false);
  
    const toggleNavBar = () => {
      setnavbarOpened(!navbarOpened);
    }
  
    return (
      <div className="navbar">
        <div className="navbar-main">
          <h1>João Santiago</h1>
  
          <button className="toggle-menu" onClick={toggleNavBar}>
            <FaBars size={24} />
          </button>
        </div>
  
        <ul className={`navbar-links ${navbarOpened ? 'navbar-links-opened' : ''}`}>
          <li><a href="#inicio">INÍCIO</a></li>
          <li><a href="#habilidades">HABILIDADES</a></li>
          <li><a href="#educacao">EDUCAÇÃO</a></li>
          <li><a href="#projetos">PROJETOS</a></li>
          {/* <li><a href="#contato">CONTATO</a></li> */}
        </ul>
      </div>
    );
  }
  
  export default NavBar;