import React, { Component } from 'react'
import Link from 'gatsby-link'

import './SideMenu.css'
class SideMenu extends 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()
      })

    close = () => {
      slideout.close()
    }

    slideout
      .on('beforeopen', function() {
        this.panel.classList.add('panel-open')
      })
      .on('open', function() {
        this.panel.addEventListener('click', close)
        let closeMenu = document.querySelectorAll('.side-close')

        Array.from(closeMenu).forEach(trigger => {
          trigger.addEventListener('click', close)
        })
      })
      .on('beforeclose', function() {
        this.panel.classList.remove('panel-open')
        this.panel.removeEventListener('click', close)
      })
  }

  render() {
    return (
      <div className="side-menu">
        <ul className="m-0 p-0 mt-4 side-navigation">
          <button className="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
            X
          </button>
          <Link to="/" className="side-close menu-home no-underline">
            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
              Home
            </li>
          </Link>
          <Link
            to="/services"
            className="side-close menu-services no-underline"
          >
            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
              Services
            </li>
          </Link>
          <Link to="/about" className="side-close menu-about no-underline">
            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
              About Us
            </li>
          </Link>
          <Link to="/blog" className="side-close menu-blog no-underline">
            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
              Blog
            </li>
          </Link>
          <Link to="/contact" className="side-close menu-contact no-underline">
            <li className="hover:bg-indigo hover:opacity-100 text-right no-underline text-2xl uppercase p-4 text-white">
              Contact
            </li>
          </Link>
        </ul>
      </div>
    )
  }
}

export default SideMenu