text: import React from 'react';
  import { Link } from 'gatsby';
  import logo from '../img/logo.svg';
  
  const Navbar = class extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              active: false,
              navBarActiveClass: ''
          };
      }
  
      toggleHamburger = () => {
          // toggle the active boolean in the state
          this.setState(
              {
                  active: !this.state.active
              },
              // after state has been updated,
              () => {
                  // set the class in state for the navbar accordingly
                  this.state.active
                      ? this.setState({
                            navBarActiveClass: 'is-active'
                        })
                      : this.setState({
                            navBarActiveClass: ''
                        });
              }
          );
      };
  
      render() {
          return (
              <nav
                  className="navbar is-transparent"
                  role="navigation"
                  aria-label="main-navigation"
              >
                  <div className="container flex items-center justify-between flex-wrap p-6">
                      <div className="navbar-brand flex">
                          <Link to="/" className="navbar-item" title="Logo">
                              <img
                                  src={logo}
                                  alt="Perth White Pointers"
                                  style={{ width: '170px' }}
                              />
                          </Link>
                          {/* Hamburger menu */}
                          <div
                              className={`navbar-burger burger ${this.state.navBarActiveClass}`}
                              data-target="navMenu"
                              onClick={() => this.toggleHamburger()}
                          >
                              <span />
                              <span />
                              <span />
                          </div>
                      </div>
                      <div
                          id="navMenu"
                          className={`navbar-menu ${this.state.navBarActiveClass}`}
                      >
                          <div className="navbar-start has-text-centered">
                              <Link className="navbar-item" to="/about">
                                  About
                              </Link>
                              <Link className="navbar-item" to="/products">
                                  Products
                              </Link>
                              <Link className="navbar-item" to="/blog">
                                  Blog
                              </Link>
                              <Link className="navbar-item" to="/contact">
                                  Contact
                              </Link>
                          </div>
                      </div>
                  </div>
              </nav>
          );
      }
  };
  
  export default Navbar;
  