text: import React from 'react';
  import AniLink from 'gatsby-plugin-transition-link/AniLink';
  import styles from '../css/navbar.module.css';
  import { FaAlignRight } from 'react-icons/fa';
  import links from '../constants/links';
  import socialIcons from '../constants/social-icons';
  import logo from '../images/logo.svg';
  
  const Navbar = () => {
    const [isOpen, setNav] = React.useState(false);
  
    const toggleNav = () => {
      setNav(isOpen => !isOpen);
    };
    console.log(isOpen);
  
    return (
      <nav className={styles.navbar}>
        <div className={styles.navCenter}>
          <div className={styles.navHeader}>
            <img src={logo} alt="backroards logo"></img>
            <button type="button" className={styles.logoBtn} onClick={toggleNav}>
              <FaAlignRight className={styles.logoIcon} />
            </button>
          </div>
          <ul
            className={
              isOpen
                ? `${styles.navLinks} ${styles.showNav}`
                : `${styles.navLinks}`
            }
          >
            {links.map((item, i) => {
              return (
                <li key={i}>
                  <AniLink fade to={item.path}>{item.text}</AniLink>
                </li>
              );
            })}
          </ul>
          <div className={styles.navSocialLinks}>
            {socialIcons.map((item, i) => {
              return (
                <a
                  key={i}
                  href={item.url}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {item.icon}
                </a>
              );
            })}
          </div>
        </div>
      </nav>
    );
  };
  
  export default Navbar;
  