Side Menu functionality and styling

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>