adds Sidebar/installs relative-path package

package.json

@@ -70,7 +70,8 @@
     "normalize.css": "^5.0.0",
     "react": "15.4.2",
     "react-css-modules": "^4.1.0",
-    "react-dom": "15.4.2"
+    "react-dom": "15.4.2",
+    "relative-path": "^1.1.0"
   },
   "babel": {
     "presets": [

src/App.jsx

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-
-import './styles.scss';
-import Main from './scenes/Main';
+import Main from './Main';
 
 class App extends Component {
 	render() {

src/Main/Sidebar/Logo/index.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './styles.scss';
+
+
+class Logo extends Component {
+	render() {
+		return (
+			<div styleName='Logo'>
+				<img src='./images/logo.svg' alt='logo'></img>
+			</div>
+		);
+	}
+}
+
+
+export default CSSModules(Logo, styles);

src/Main/Sidebar/Logo/styles.scss

@@ -0,0 +1,7 @@
+@import "./src/styles/base";
+
+
+:local(.Logo) {
+  height: 15px;
+  width: 15px;
+}

src/Main/Sidebar/index.jsx

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './styles.scss';
+import Logo from './Logo';
+
+
+class Sidebar extends Component {
+	render() {
+		return (
+			<div styleName='Sidebar'>
+				<Logo />
+			</div>
+		);
+	}
+}
+
+
+export default CSSModules(Sidebar, styles);

src/Main/Sidebar/styles.scss

@@ -0,0 +1,10 @@
+@import "./src/styles/base";
+
+
+:local(.Sidebar) {
+  background-color:$color-background-medium;
+  width: 10rem;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}

src/Main/index.jsx

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './styles.scss';
+import Sidebar from './Sidebar';
+
+
+class Main extends Component {
+	render() {
+		return (
+			<div styleName='Main'>
+        <Sidebar />
+			</div>
+		);
+	}
+}
+
+
+export default CSSModules(Main, styles);

src/Main/styles.scss

@@ -0,0 +1,10 @@
+@import "./src/styles/base";
+
+
+:local(.Main) {
+	background-color:$background-color;
+
+	min-height: 100vh;
+  width: 100vw;
+	position:relative;
+}

src/styles/base.scss

@@ -0,0 +1,40 @@
+@import "./src/styles/colors";
+
+$body-font-size:15px;
+
+$container-width: 1024px;
+
+// Reset!
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input[type=text],
+input[type=email], input[type=password], input[type=tel], button {
+  margin:0;
+  padding:0;
+  border:0;
+  font-size:$body-font-size;
+  font:inherit;
+  vertical-align:baseline;
+  line-height:normal;
+}
+
+body {
+	font-family: Lato, sans-serif;
+  margin:0;
+  min-height:100vh;
+  position:relative;
+  color:$color-text-dark;
+  background-color:$background-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/styles/colors.scss

@@ -0,0 +1,5 @@
+$background-color: #ffffff;
+
+$color-background-medium: #D8D8D8;
+
+$color-text-dark: #8A8A8A;