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()
      })
  }

  render() {
    return (
      <div className="side-menu">
        <ul className="m-0 p-0 mt-4 side-navigation">
          <Link to="/services">
            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
              What We Do
            </li>
          </Link>
          <Link to="/about">
            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
              Team
            </li>
          </Link>
          <Link to="/blog">
            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
              Blog
            </li>
          </Link>
        </ul>
      </div>
    )
  }
}

export default SideMenu