Side Menu functionality and styling

src/components/Header.css

@@ -9,6 +9,10 @@
   margin-bottom: 0.3rem;
 }
 
+.menu_icon:focus {
+  outline: 0;
+}
+
 .menu_bar-top {
   width: 25px;
 }

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;
 }

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>

src/layouts/index.js

@@ -20,7 +20,7 @@ const Layout = ({ children, data }) => (
         },
       ]}
     />
-    <div className="side-panel">
+    <div className="side-panel panel">
       <Header />
       {children()}
       <Footer />