loads collections via redux, begins sidebar construction

src/client/components/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Link } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import MeasureWindow from 'payload/client/components/utilities/MeasureWindow';
 import MeasureScroll from 'payload/client/components/utilities/MeasureScroll';
+import LoadContent from 'payload/client/components/utilities/LoadContent';
 
 import 'payload/client/scss/app.css';
 
@@ -14,6 +15,7 @@ class App extends Component {
           <React.Fragment>
             <MeasureScroll />
             <MeasureWindow />
+            <LoadContent />
             {this.props.children}
           </React.Fragment>
         </Router>

src/client/components/layout/Sidebar/index.js

@@ -1,14 +1,33 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 import Icon from 'demo/client/components/graphics/Icon';
 import Label from '../../type/Label';
 
 import './index.css';
 
-export default () => {
-  return (
-    <aside className="sidebar">
-      <Icon />
-      <Label>Collections</Label>
-    </aside>
-  );
+const mapStateToProps = state => ({
+  collections: state.collections.all
+});
+
+class Sidebar extends Component {
+  render() {
+    return (
+      <aside className="sidebar">
+        <Link to="/">
+          <Icon />
+        </Link>
+        <Label>Collections</Label>
+        <nav>
+          {this.props.collections.map((collection, i) => {
+            return (
+              <Link key={i} to={`/collections/${collection.slug}`}>{collection.plural}</Link>
+            );
+          })}
+        </nav>
+      </aside>
+    );
+  }
 };
+
+export default connect(mapStateToProps)(Sidebar);

src/client/components/layout/Sidebar/index.scss

@@ -10,4 +10,17 @@
     @include m;
     width: $base;
   }
+
+  label {
+    color: $gray;
+  }
+
+  nav {
+    margin: rem(.5) 0;
+    a {
+      display: block;
+      padding: rem(.33) 0;
+      border-bottom: 0;
+    }
+  }
 }

src/client/components/utilities/LoadContent/index.js

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+import collections from 'demo/collections';
+
+const mapDispatchToProps = dispatch => ({
+  loadCollections: collections => dispatch({ type: 'LOAD_COLLECTIONS', payload: collections }),
+});
+
+class LoadContent extends Component {
+
+  componentDidMount() {
+    this.props.loadCollections(collections);
+  }
+
+  render() {
+    return false;
+  }
+}
+
+export default connect(null, mapDispatchToProps)(LoadContent);

src/client/components/views/Login/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import ContentBlock from 'payload/client/components/layout/ContentBlock';
 import Logo from 'demo/client/components/graphics/Logo';
 import Form from 'payload/client/components/forms/Form';
@@ -21,6 +22,7 @@ export default () => {
           Log In
         </Button>
       </Form>
+      <Link to="/">To Dashboard</Link>
     </ContentBlock>
   );
 };

src/client/reducers/collections.js

@@ -5,6 +5,7 @@ const defaultState = {
 export default (state = defaultState, action) => {
   switch (action.type) {
   case 'LOAD_COLLECTIONS':
+
     return {
       ...state,
       all: action.payload

src/client/scss/_type.scss

@@ -78,8 +78,8 @@
 
 %label {
     text-transform: uppercase;
-    letter-spacing: rem(.05);
-    font-size: rem(.3);
+    letter-spacing: rem(.1);
+    font-size: rem(.275);
     font-family: $font-label;
     -webkit-font-smoothing: auto;
 

src/client/scss/_vars.scss

@@ -4,7 +4,7 @@
 
 $body           : 18px;
 $base-px        : 36px;
-$base           : ($base-px / $body) + rem; // This computes to 30px in rem
+$base           : ($base-px / $body) + rem; // This computes to 36px in rem
 
 @function rem($multiplier) {
 	@return ($base-px / $body) * $multiplier + rem;

src/client/scss/app.scss

@@ -24,10 +24,10 @@ body {
 
 html {
   font-size: $body;
-    line-height: rem(1);
-    font-size: 20px;
+  line-height: rem(1);
+  font-size: 20px;
 
-  @include mid-break {
+/*  @include mid-break {
     font-size: 18px;
     line-height: rem(1);
   }
@@ -35,7 +35,7 @@ html {
   @include small-break {
     font-size: 16px;
     line-height: rem(.8)
-  }
+  }*/
 }
 
 ::selection {