80 lines
2.2 KiB
JavaScript
80 lines
2.2 KiB
JavaScript
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-2xl mb-4 opacity-50 hover:opacity-100 px-2 side-close"
|
|
onClick={this.close}
|
|
>
|
|
X
|
|
</button>
|
|
<Link to="/" className="no-underline">
|
|
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
|
|
Home
|
|
</li>
|
|
</Link>
|
|
<Link to="/services" className="no-underline">
|
|
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
|
|
What We Do
|
|
</li>
|
|
</Link>
|
|
<Link to="/about" className="no-underline">
|
|
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
|
|
Team
|
|
</li>
|
|
</Link>
|
|
<Link to="/blog" className="no-underline">
|
|
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
|
|
Blog
|
|
</li>
|
|
</Link>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default SideMenu
|