old-v2-frontend/src/components/Header.js

import React, { Component } from 'react'
import Link, { withPrefix } from 'gatsby-link'
import LogoSaburlyWhite from '../images/saburly-logo-w.svg'
import Button from './Button'

import Headroom from 'react-headroom'

import './Header.css'

let menuClasses =
  'no-underline mt-4 lg:inline-block text-white lg:mt-0 hover:opacity-80 uppercase mr-4'

const phoneMenuClasses = menuClasses + ' ml-4 text-xl'
class Header extends Component {
  render() {
    return (
      <Headroom>
        <header className="saburly-menu">
          <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
            <Link to="/">
              <div className="max-w-xs mr-8">
                <img
                  src={LogoSaburlyWhite}
                  className="saburly-logo saburly-transition"
                  alt="Saburly Logo"
                />
              </div>
            </Link>

            <div className="side-toggle saburly-transition">
              <div className="menu_icon visible lg:invisible">
                <span className="menu_bar-top" />
                <span className="menu_bar-mid" />
                <span className="menu_bar-bot" />
              </div>
            </div>

            <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
              <ul className="list-reset text-sm">
                <Link to="/services">
                  <li className={menuClasses}>Services</li>
                </Link>
                <Link to="/about">
                  <li className={menuClasses}>About Us</li>
                </Link>
                <Button
                  text="Request a quote"
                  standard
                  classes="text-white hover:shadow"
                  url="/contact"
                />
                <a href="tel:7206432025">
                  <li className={phoneMenuClasses}>
                    <i className="fas fa-phone mr-2 fa-flip-horizontal" />
                    720-643-2025
                  </li>
                </a>
              </ul>
            </div>
          </nav>
        </header>
      </Headroom>
    )
  }
}

export default Header