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

8
src/components/Header.js
View File

@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import Link from 'gatsby-link'
import Link, { withPrefix } from 'gatsby-link'
import LogoSaburly from '../images/logo-saburly-colorful.svg'
import Button from './Button'
@@ -10,6 +10,7 @@ let menuClasses =
class Header extends Component {
render() {
const isHome = location.pathname === withPrefix('/')
return (
<header className="bg-saburly-light">
<nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
@@ -29,6 +30,11 @@ class Header extends Component {
<div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
<ul className="list-reset text-sm">
{!isHome && (
<Link to="/">
<li className={menuClasses}>Home</li>
</Link>
)}
<Link to="/services">
<li className={menuClasses}>Services</li>
</Link>

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>