Close main menu on click and stylistic changes

src/components/Header.js

@@ -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>

src/components/SideMenu.js

@@ -21,8 +21,7 @@ class SideMenu extends Component {
         slideout.toggle()
       })
 
-    function close(e) {
+    close = () => {
-      e.preventDefault()
       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
+          <button className="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
-            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">
+          <Link to="/" className="side-close menu-home no-underline">
-            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
+            <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">
+          <Link
-            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
+            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">
+          <Link to="/about" className="side-close menu-about no-underline">
-            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
+            <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">
+          <Link to="/blog" className="side-close menu-blog no-underline">
-            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
+            <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">
+          <Link to="/contact" className="side-close menu-contact no-underline">
-            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
+            <li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
               Contact
             </li>
           </Link>

src/templates/blog.js

@@ -11,8 +11,8 @@ class Blog extends Component {
       <main>
         <PageIntro
           intro="Blog"
-          headline="We are busy creating great code"
+          headline="We are busy coding"
-          text="but occasionally we find the time to have fun and publish"
+          text="but occasionally we find the time to have fun & publish stuff"
           sectionClasses="mb-16 lg:mb-4"
         />
         <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">