added wrapper and navbar

app/Wrapper.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Navbar from './components/Navbar/Navbar';
+
+//styling
+import './scss/index.scss';
+
+export default class Wrapper extends React.Component {
+
+    render() {
+        return (
+            <div>
+                <Navbar/>
+                <div className="content">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Wrapper.propTypes = {
+    children: React.PropTypes.node,
+};

app/app.js

@@ -2,39 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
+import Wrapper from './Wrapper';
+import NotFound from './pages/NotFound/NotFound';
+
 //pages
-import Home from './pages/Home';
-import New from './pages/New';
-import Default from './pages/Default';
-
-//components
-import Navbar from './components/Navbar';
-
-//styling
-import './scss/index.scss';
-
-class Wrapper extends React.Component {
-
-    render() {
-        return (
-            <div>
-                <Navbar/>
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-Wrapper.propTypes = {
-    children: React.PropTypes.node,
-};
+import Home from './pages/Home/Home';
 
 ReactDOM.render(
     <Router history={browserHistory}>
         <Route path="/" component={Wrapper}>
             <IndexRoute component={Home}/>
-            <Route path="/new" component={New}/>
-            <Route path="*" component={Default}/>
+            <Route path="*" component={NotFound}/>
         </Route>
     </Router>
 , document.getElementById('app'));

app/components/Navbar/Navbar.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import { Link } from 'react-router';
 
+import './Navbar.scss';
+
 export default class Navbar extends React.Component {
 
     render() {
         return (
             <div className="Navbar">
-                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="active">Home</Link>
-                <Link to="/new" className="Navbar__item" activeClassName="active">New</Link>
+                <div className="Navbar__header">Title</div>
+                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
+                <Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
             </div>
         );
     }

app/components/Navbar/Navbar.scss

@@ -0,0 +1,47 @@
+@import '../../scss/variables';
+
+.Navbar {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: $navbarWidth;
+    background-color: $gray2;
+    border-right: 1px solid darken($gray2, 2%);
+    overflow-y: auto;
+}
+
+.Navbar__header {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $gray2;
+}
+
+.Navbar__item {
+    min-height: 50px;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: $white;
+    transition: background-color 0.1s linear;
+    
+    &:hover {
+        background-color: $gray1; 
+    }
+    
+    & + .Navbar__item {
+        border-top: 1px solid $gray1;
+    }
+    
+}
+
+.Navbar__item--active {
+    padding-left: 4px;
+    border-right: 4px solid $primaryBlue;
+}

app/pages/New.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-export default class New extends React.Component {
-
-    render() {
-        return (
-            <div>
-                Test new page
-            </div>
-        );
-    }
-}

app/pages/NotFound/NotFound.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import './NotFound.scss';
 
 export default class Default extends React.Component {
     render() {
         return (
-            <div className="Default">
-                404
+            <div className="NotFound">
+                404 Not Found
             </div>
         );
     }

app/pages/NotFound/NotFound.scss

@@ -1,9 +1,8 @@
-.Default {
+.NotFound {
     height: 100%;
-    width: 100%;
     display: flex;
-    justify-content: center;
     align-items: center;
-    text-align: center;
-    font-size: 5em;
+    justify-content: center;
+    
+    font-size: 20px;
 }

app/scss/Home.scss

@@ -1,5 +0,0 @@
-.Home {
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
-}

app/scss/Navbar.scss

@@ -1,34 +0,0 @@
-.Navbar {
-    position: fixed;
-    top: 0px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: $navbarHeight;
-    background-color: darken(white, 5%);
-    border-bottom: 1px solid darken(white, 10%);
-    
-    .active {
-        background-color: darken(white, 2%);
-    }
-}
-
-.Navbar__item {
-    align-self: stretch;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100px;
-    background-color: white;
-    color: gray;
-    cursor: pointer;
-    text-decoration: none;
-    
-    &:hover {
-        background-color: darken(white, 2%);
-    }
-
-    & + .Navbar__item {
-        border-left: 1px solid darken(white, 5%);
-    }
-}

app/scss/index.scss

@@ -1,8 +1,3 @@
 @import '../assets/normalize.css';
 @import './variables.scss';
-
-// import all css files
 @import './style.scss';
-@import './Navbar.scss';
-@import './Default.scss';
-@import './Home.scss';

app/scss/style.scss

@@ -1,3 +1,11 @@
 body {
-    padding-top: $navbarHeight;
+    background-color: $gray1;
+    color: $white;
+    padding-left: $navbarWidth;
 }
+
+.content {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+}

app/scss/variables.scss

@@ -1 +1,13 @@
-$navbarHeight: 50px;
+$navbarWidth: 200px;
+
+
+// colors
+$primaryBlue: #42adf4;
+$white: darken(white, 10%);
+
+$gray1: #686a6e;
+$gray2: #424549;
+$gray3: #36393e;
+$gray4: #2e3136;
+$gray5: #282b30;
+$gray6: #1e2124;