import React from "react" import { Link, graphql, useStaticQuery } from "gatsby" import Img from "./Image" import { FaAlignRight } from "react-icons/fa" import links from "../constants/links" import { NavbarWrapper } from "../css" const Navbar = () => { const data = useStaticQuery(getLogo) return ( <NavbarWrapper> <div className="nav-center"> <div className="nav-header"> <Link to="/" data-cy="logo"> <Img fixed={data.logo.childImageSharp.fixed} alt="Homepage" /> </Link> <button type="button" className="logo-btn" // onClick={toggleNav} aria-label="Open Menu" data-cy="mobile-button" > <FaAlignRight className="logo-icon" /> </button> </div> <ul className="nav-links"> {links.map((item, index) => { return ( <li key={index}> <Link to={item.path} data-cy={item.text} activeClassName="navitem-active" > {item.text} </Link> </li> ) })} </ul> </div> </NavbarWrapper> ) } const getLogo = graphql` query { logo: file(relativePath: { eq: "logo.png" }) { childImageSharp { fixed(width: 118, height: 78) { ...GatsbyImageSharpFixed_noBase64 } } } } ` export default Navbar