text: import React, { Component } from "react"
  import { Link } from "gatsby"
  import logo from "../../images/logo.svg"
  import { FaCartArrowDown } from "react-icons/fa"
  
  export default class Navbar extends Component {
    state = {
      navbarOpen: false,
      css: "collapse navbar-collapse",
      links: [
        {
          id: 1,
          path: "/",
          text: "Accueil",
        },
        {
          id: 2,
          path: "/about",
          text: "A propos",
        },
      ],
    }
    navbarHandler = () => {
      this.state.navbarOpen
        ? this.setState({
            navbarOpen: false,
            css: "collapse navbar-collapse",
          })
        : this.setState({
            navbarOpen: true,
            css: "collapse navbar-collapse show",
          })
    }
    render() {
      return (
        <nav className="navbar navbar-expand-sm navbar-dark navbar-color">
          <Link to="/" className="navbar-brand">
            <img src={logo} alt="logo" />
            {/* https://www.iconfinder.com/icons/185113/coffee_streamline_icon
                Creative Commons (Attribution 3.0 Unported);
                https://www.iconfinder.com/webalys */}
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            onClick={this.navbarHandler}
          >
            <span className="navbar-toggler-icon" />
          </button>
          <div className={this.state.css}>
            <ul className="navbar-nav mx-auto">
              {this.state.links.map(link => {
                return (
                  <li key={link.id} className="nav-item ml-sm-3">
                    <Link to={link.path} className="nav-link">
                      {link.text}
                    </Link>
                  </li>
                )
              })}
              <li className="navbar-item ml-sm-5">
                <FaCartArrowDown className="cart-icon snipcart-checkout" />
              </li>
            </ul>
          </div>
        </nav>
      )
    }
  }
  