import React from 'react'
import Link from 'gatsby-link'
import LogoSaburly from '../images/logo-saburly-white.svg'
import Button from './Button'
import Slideout from 'slideout'

import './Header.css'

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

class Header extends React.Component {
  componentDidMount() {
    var Slideout = require('slideout')

    const slideout = new Slideout({
      panel: document.querySelector('.side-panel'),
      menu: document.querySelector('.side-menu'),
      toggle: document.querySelector('.side-toggle'),
      padding: 0,
      tolerance: 70,
      side: 'right',
    })

    document
      .querySelector('.side-toggle')
      .addEventListener('click', function() {
        slideout.toggle()
      })
  }

  render() {
    return (
      <div>
        <header className="bg-saburly-indigo">
          <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
            <Link to="/">
              <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
            </Link>

            <div className="side-toggle">
              <button className="menu_icon visible lg:invisible">
                <span className="menu_bar-top" />
                <span className="menu_bar-mid" />
                <span className="menu_bar-bot" />
              </button>
            </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}>What We Do</li>
                </Link>
                <Link to="/about">
                  <li className={menuClasses}>Team</li>
                </Link>
                <Link to="/blog">
                  <li className={menuClasses}>Blog</li>
                </Link>

                <Button
                  text="Contact"
                  standard
                  classes="rounded-full text-white hover:shadow"
                  url="/contact"
                />
              </ul>
            </div>
          </nav>
        </header>
      </div>
    )
  }
}

export default Header