Restyling of side menu

src/components/Header.css

@@ -42,91 +42,3 @@
   -webkit-transform-origin: 15% 95%;
   transform-origin: 15% 95%;
 }
-
-/* Side Menu */
-.slideout-menu {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 256px;
-  min-height: 100vh;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  z-index: 0;
-  display: none;
-  background-color: #1a0828;
-}
-
-.slideout-menu-left {
-  left: 0;
-}
-
-.slideout-menu-right {
-  right: 0;
-}
-
-.slideout-panel {
-  position: relative;
-  z-index: 1;
-  will-change: transform;
-  background-color: #fff;
-  /* A background-color is required */
-  min-height: 100vh;
-}
-
-.slideout-open,
-.slideout-open body,
-.slideout-open .slideout-panel {
-  overflow: hidden;
-}
-
-.slideout-open .slideout-menu {
-  display: block;
-}
-
-.panel:before {
-  content: '';
-  display: block;
-  background-color: rgba(0, 0, 0, 0);
-  transition: background-color 0.5s ease-in-out;
-}
-
-.panel-open:before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 99;
-}
-
-.mainmenu {
-  margin-top: 4rem;
-}
-
-.side--close:hover,
-.mainmenu li:hover {
-  background-color: #cfba89;
-}
-
-.side--close {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
-}
-
-.mainmenu li a {
-  color: #fff;
-  font-size: 1.2rem;
-  height: 100%;
-  display: block;
-  padding: 0.5rem 0rem;
-  font-weight: 600;
-  font-family: 'Montserrat', sans-serif;
-}
-
-.mainmenu li a:hover,
-.side--close:hover,
-a:hover {
-  text-decoration: none !important;
-}

src/components/Header.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Link from 'gatsby-link'
 import LogoSaburly from '../images/logo-saburly-white.svg'
 import Button from './Button'
@@ -9,26 +9,7 @@ import './Header.css'
 let menuClasses =
   'no-underline mt-4 lg:inline-block opacity-80 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
 
-class Header extends React.Component {
+class Header extends Component {
-  componentDidMount() {
-    var Slideout = require('slideout')
-
-    const slideout = new Slideout({
-      panel: document.querySelector('.side-panel'),
-      menu: document.querySelector('.side-menu'),
-      toggle: document.querySelector('.side-toggle'),
-      padding: 0,
-      tolerance: 70,
-      side: 'right',
-    })
-
-    document
-      .querySelector('.side-toggle')
-      .addEventListener('click', function() {
-        slideout.toggle()
-      })
-  }
-
   render() {
     return (
       <div>

src/components/SideMenu.css

@@ -0,0 +1,85 @@
+.slideout-menu {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 256px;
+  min-height: 100vh;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  z-index: 0;
+  display: none;
+  background-color: #2f365f;
+}
+
+.slideout-menu-left {
+  left: 0;
+}
+
+.slideout-menu-right {
+  right: 0;
+}
+
+.slideout-panel {
+  position: relative;
+  z-index: 1;
+  will-change: transform;
+  background-color: #fff;
+  min-height: 100vh;
+}
+
+.slideout-open,
+.slideout-open body,
+.slideout-open .slideout-panel {
+  overflow: hidden;
+}
+
+.slideout-open .slideout-menu {
+  display: block;
+}
+
+.panel:before {
+  content: '';
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.5s ease-in-out;
+}
+
+.panel-open:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+
+.mainmenu {
+  margin-top: 4rem;
+}
+
+.side--close:hover,
+.mainmenu li:hover {
+  background-color: #cfba89;
+}
+
+.side--close {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.mainmenu li a {
+  color: #fff;
+  font-size: 1.2rem;
+  height: 100%;
+  display: block;
+  padding: 0.5rem 0rem;
+  font-weight: 600;
+  font-family: 'Montserrat', sans-serif;
+}
+
+.mainmenu li a:hover,
+.side--close:hover,
+a:hover {
+  text-decoration: none !important;
+}

src/components/SideMenu.js

@@ -1,10 +1,30 @@
 import React, { Component } from 'react'
 
+import './SideMenu.css'
 class SideMenu extends Component {
+  componentDidMount() {
+    var Slideout = require('slideout')
+
+    const slideout = new Slideout({
+      panel: document.querySelector('.side-panel'),
+      menu: document.querySelector('.side-menu'),
+      toggle: document.querySelector('.side-toggle'),
+      padding: 0,
+      tolerance: 70,
+      side: 'right',
+    })
+
+    document
+      .querySelector('.side-toggle')
+      .addEventListener('click', function() {
+        slideout.toggle()
+      })
+  }
+
   render() {
     return (
       <div className="side-menu">
-        <h1>Hello World</h1>
+        <h1 className="text-white text-center">Hello World</h1>
       </div>
     )
   }

src/layouts/index.js

@@ -4,6 +4,7 @@ import Helmet from 'react-helmet'
 
 import Header from '../components/Header'
 import Footer from '../components/Footer'
+import SideMenu from '../components/SideMenu'
 import '../styles/index.css'
 import '../styles/custom.css'
 
@@ -24,6 +25,7 @@ const Layout = ({ children, data }) => (
       {children()}
       <Footer />
     </div>
+    <SideMenu />
   </div>
 )