From 7eff0679b03aee33724fa411ac6c82fd0983c531 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 5 Jul 2018 17:52:02 +0200
Subject: [PATCH] Side Menu functionality and styling

---
 src/components/Header.css   |  4 ++++
 src/components/SideMenu.css |  1 -
 src/components/SideMenu.js  | 30 +++++++++++++++++++++++++++---
 src/layouts/index.js        |  2 +-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/Header.css b/src/components/Header.css
index c2885c3..72eefb2 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -9,6 +9,10 @@
   margin-bottom: 0.3rem;
 }
 
+.menu_icon:focus {
+  outline: 0;
+}
+
 .menu_bar-top {
   width: 25px;
 }
diff --git a/src/components/SideMenu.css b/src/components/SideMenu.css
index cb315bf..6b7f4b7 100644
--- a/src/components/SideMenu.css
+++ b/src/components/SideMenu.css
@@ -39,7 +39,6 @@
 
 .panel:before {
   content: '';
-  display: block;
   background-color: rgba(0, 0, 0, 0);
   transition: background-color 0.5s ease-in-out;
 }
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
index ac72698..17b614b 100644
--- a/src/components/SideMenu.js
+++ b/src/components/SideMenu.js
@@ -20,24 +20,48 @@ class SideMenu extends Component {
       .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="no-underline text-2xl uppercase p-4 text-center text-white">
+            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
               What We Do
             </li>
           </Link>
           <Link to="/about">
-            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
+            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
               Team
             </li>
           </Link>
           <Link to="/blog">
-            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
+            <li className="text-right no-underline text-2xl uppercase p-2 text-white">
               Blog
             </li>
           </Link>
diff --git a/src/layouts/index.js b/src/layouts/index.js
index d59b932..0141ef9 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -20,7 +20,7 @@ const Layout = ({ children, data }) => (
         },
       ]}
     />
-    <div className="side-panel">
+    <div className="side-panel panel">
       <Header />
       {children()}
       <Footer />