text: import React from "react"
  import { StaticImage } from "gatsby-plugin-image"
  import { Link } from "gatsby"
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
  import { faBars, faShoppingCart } from "@fortawesome/free-solid-svg-icons"
  
  function Navbar() {
    return (
      <div
        className="bg-main-black position-sticky col-12 top-0"
        style={{ zIndex: 2 }}
      >
        <div className="navbar d-flex flex-row container-xl">
          <Link className="logo" to="/">
            <StaticImage
              className="col-12 d-flex align-items-center"
              src="../images/slon-logo.svg"
              alt="Slon store logo"
            />
          </Link>
          <button className="toggle-nav bg-transparent rounded d-md-none">
            <FontAwesomeIcon icon={faBars} />
          </button>
          <nav className="d-none d-md-flex justify-content-between col-7 col-xl-5">
            <Link className="link" activeClassName="active-route" to="/">
              Inicio
            </Link>
            <Link className="link" activeClassName="active-route" to="/tienda">
              Tienda
            </Link>
            <Link className="link" activeClassName="active-route" to="/registro">
              Quienes Somos
            </Link>
            <Link className="link" activeClassName="active-route" to="/registro">
              Contacto
            </Link>
            <button className="cart-button rounded">
              <FontAwesomeIcon icon={faShoppingCart} />
            </button>
          </nav>
        </div>
      </div>
    )
  }
  
  export default Navbar
  