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

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

    function close(e) {
      e.preventDefault()
      slideout.close()
    }

    slideout
      .on('beforeopen', function() {
        this.panel.classList.add('panel-open')
      })
      .on('open', function() {
        this.panel.addEventListener('click', close)
        document.querySelector('.side--close').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-3xl mb-4 opacity-50 hover:opacity-100 px-2 side--close"
            onClick={this.close}
          >
            X
          </button>
          <Link to="/services">
            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
              What We Do
            </li>
          </Link>
          <Link to="/about">
            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
              Team
            </li>
          </Link>
          <Link to="/blog">
            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
              Blog
            </li>
          </Link>
        </ul>
      </div>
    )
  }
}

export default SideMenu