senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Close main menu on click and stylistic changes

Browse Source
This commit is contained in:
Moris Zen
2018-07-10 22:34:52 +02:00
parent 666125499d
commit 5a0d23a0ed
3 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/SideMenu.js
View File

@@ -21,8 +21,7 @@ class SideMenu extends Component {
slideout.toggle()
})
function close(e) {
e.preventDefault()
close = () => {
slideout.close()
}
@@ -32,7 +31,11 @@ class SideMenu extends Component {
})
.on('open', function() {
this.panel.addEventListener('click', close)
document.querySelector('.side-close').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')
@@ -44,34 +47,34 @@ class SideMenu extends Component {
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}
>
<button className="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
X
</button>
<Link to="/" className="no-underline">
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
<Link to="/" className="side-close menu-home no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 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">
<Link
to="/services"
className="side-close menu-services no-underline"
>
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
Services
</li>
</Link>
<Link to="/about" className="no-underline">
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
<Link to="/about" className="side-close menu-about no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
About Us
</li>
</Link>
<Link to="/blog" className="no-underline">
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
<Link to="/blog" className="side-close menu-blog no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
Blog
</li>
</Link>
<Link to="/contact" className="no-underline">
<li className="text-right no-underline text-2xl uppercase p-2 text-white">
<Link to="/contact" className="side-close menu-contact no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
Contact
</li>
</Link>