From 2c77028d61cd04986eb47d1b28b9b7aef6c66b56 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 5 Jul 2018 17:28:49 +0200
Subject: [PATCH] Styling of footer and sidemenu

---
 src/components/Footer.js    |  2 +-
 src/components/SideMenu.css | 31 -------------------------------
 src/components/SideMenu.js  | 19 ++++++++++++++++++-
 3 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 0992abc..98b8029 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -72,7 +72,7 @@ const Footer = () => (
       </div>
 
       <div className="lg:w-3/4">
-        <div className="p-4 text-center lg:text-left sm:flex justify-between">
+        <div className="p-4 text-center lg:text-left sm:flex justify-around">
           <nav>
             <p className="font-thin text-white opacity-50">Sitemap</p>
             <ul className="list-reset text-sm inline-block">
diff --git a/src/components/SideMenu.css b/src/components/SideMenu.css
index 7564f7f..cb315bf 100644
--- a/src/components/SideMenu.css
+++ b/src/components/SideMenu.css
@@ -52,34 +52,3 @@
   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;
-}
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
index 7b12efc..ac72698 100644
--- a/src/components/SideMenu.js
+++ b/src/components/SideMenu.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import Link from 'gatsby-link'
 
 import './SideMenu.css'
 class SideMenu extends Component {
@@ -24,7 +25,23 @@ class SideMenu extends Component {
   render() {
     return (
       <div className="side-menu">
-        <h1 className="text-white text-center">Hello World</h1>
+        <ul className="m-0 p-0 mt-4 side-navigation">
+          <Link to="/services">
+            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
+              What We Do
+            </li>
+          </Link>
+          <Link to="/about">
+            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
+              Team
+            </li>
+          </Link>
+          <Link to="/blog">
+            <li className="no-underline text-2xl uppercase p-4 text-center text-white">
+              Blog
+            </li>
+          </Link>
+        </ul>
       </div>
     )
   }