Merge pull request #29 from imbhargav5/fix-28

Add 2 column layout

src/client/app.js

@@ -1,5 +1,6 @@
-import { Route, Link, Redirect, Switch } from "react-router-dom";
 import React, { Component } from "react";
+import { Route, Redirect, Switch } from "react-router-dom";
+import PropTypes from "prop-types";
 import { Provider } from "react-redux";
 import bundle from "./bundle";
 import Header from "./components/Header";
@@ -16,17 +17,56 @@ import styled, { injectGlobal } from "styled-components";
 // Global styles
 injectGlobal`
   @import url('https://fonts.googleapis.com/css?family=Montserrat');
-
+  *{
+    box-sizing: border-box;
+  }
+  html, body{
+    height : 100%;
+  }
   body {
     margin: 0;
     font-size: 16px;
     font-family: 'Montserrat', sans-serif;
+    height : 100%;
+  }
+  #app {
+    height : 100%;
   }
 `;
 
-const Root = styled.div``;
+const Sidebar = styled.div`
+  flex: 0 0 240px;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+const StyledHeader = styled(Header)`
+  align-content: flex-start;
+`;
+
+const StyledFooter = styled(Footer)`
+  align-content: flex-end;
+  text-align: left;
+  padding-left: 0;
+`;
+
+const StyledCore = styled(Core)`
+  flex : 1;
+  height: 100%;
+`;
 
-const RootMain = styled.div`min-height: 600px;`;
+const Root = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+const RootMain = styled.div`
+  display: flex;
+  min-height: 600px;
+  height: 100%;
+`;
 
 // Fetch bundles
 // Dynamic imports
@@ -45,6 +85,11 @@ const RedirectWithStatus = ({ from, to }) =>
     }}
   />;
 
+RedirectWithStatus.propTypes = {
+  from: PropTypes.any,
+  to: PropTypes.any
+};
+
 // A component to render a fading Route
 const FadingRoute = ({ component: Component, ...rest }) =>
   <Route
@@ -54,15 +99,21 @@ const FadingRoute = ({ component: Component, ...rest }) =>
         <Component {...props} />
       </FadeIn>}
   />;
+FadingRoute.propTypes = {
+  component: PropTypes.any
+};
 
 export default class App extends Component {
   render() {
     return (
       <Provider store={store}>
         <Root>
-          <Header />
           <RootMain>
-            <Core>
+            <Sidebar>
+              <StyledHeader />
+              <StyledFooter />
+            </Sidebar>
+            <StyledCore>
               <Switch>
                 <FadingRoute exact path="/" component={Home} />
                 <Route exact path="/about" component={About} />
@@ -88,9 +139,8 @@ export default class App extends Component {
                 <Route exact path="/error" component={ServerError} />
                 <Route component={NotFoundPage} />
               </Switch>
-            </Core>
+            </StyledCore>
           </RootMain>
-          <Footer />
         </Root>
       </Provider>
     );

src/client/components/Core/index.js

@@ -1,4 +1,5 @@
-import React, { Component } from "react";
+import React from "react";
+import PropTypes from "prop-types";
 import { CentredContainer as Container } from "../BlockContainer";
 import styled from "styled-components";
 
@@ -9,18 +10,17 @@ const Outer = styled.div`
   min-height: inherit;
 `;
 
-class Core extends Component {
-  render() {
-    return (
-      <Outer>
-        <Container>
-          <Inner>
-            {this.props.children}
-          </Inner>
-        </Container>
-      </Outer>
-    );
-  }
-}
-const StyledCore = styled(Core)``;
-export default StyledCore;
+const Core = ({ className, children }) =>
+  <Outer className={className}>
+    <Container>
+      <Inner>
+        {children}
+      </Inner>
+    </Container>
+  </Outer>;
+Core.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.any
+};
+
+export default Core;

src/client/components/Footer/index.js

@@ -1,18 +1,18 @@
-import React, { Component } from "react";
+import React from "react";
+import PropTypes from "prop-types";
 import { CentredContainer as Container } from "../BlockContainer";
 import styled from "styled-components";
 
 const Text = styled.p`padding: 1em;`;
-class Footer extends Component {
-  render() {
-    return (
-      <Container>
-        <Text>
-          Made with ❤️ by <a href="http://twitter.com/imbhargav5">imbhargav5</a>
-        </Text>
-      </Container>
-    );
-  }
-}
+
+const Footer = ({ className }) =>
+  <Container className={className}>
+    <Text>
+      Made with ❤️ by <a href="http://twitter.com/imbhargav5">imbhargav5</a>
+    </Text>
+  </Container>;
+Footer.propTypes = {
+  className: PropTypes.string
+};
 
 export default Footer;

src/client/components/Header/index.js

@@ -1,24 +1,32 @@
-import React, { Component } from "react";
+import React from "react";
+import PropTypes from "prop-types";
 import styled from "styled-components";
-import { CentredContainer as Container } from "../BlockContainer";
+import Container from "../BlockContainer";
 import Navbar from "../Navbar";
 
 const Outer = styled.div`
   background-color: #fff;
   padding-bottom: 1em;
 `;
 
-const Inner = styled.div`text-align: left;`;
+const Inner = styled.div`
+  text-align: left;
+  border-bottom: 1px dashed black;
+  margin-bottom: 1em;
+  padding: 1em 0;
+`;
+
 const Box = styled.div`
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-start;
 `;
+
 const Heading = styled.h1`
   color: #303233;
-  font-size: 3em;
+  font-size: 2em;
   padding: 0;
-  margin: 0;
+  margin: 0 0 16px;
   line-height: 1;
 `;
 
@@ -39,23 +47,20 @@ const BuiltWith = styled.p`
   margin-bottom: 0;
 `;
 
-class Header extends Component {
-  render() {
-    return (
-      <Outer>
-        <Container>
-          <Box>
-            <Inner>
-              <Heading> Summer </Heading>
-              <Subheading>For the ever evolving front end stack</Subheading>
-            </Inner>
-            <Navbar />
-          </Box>
-          <BuiltWith>React 16+, React Router 4+, Webpack 3+</BuiltWith>
-        </Container>
-      </Outer>
-    );
-  }
-}
-
+const Header = ({ className }) =>
+  <Outer className={className}>
+    <Container>
+      <Box>
+        <Inner>
+          <Heading> React Starter </Heading>
+          <Subheading>For the ever evolving front end stack</Subheading>
+        </Inner>
+        <Navbar />
+      </Box>
+      <BuiltWith>React 16+, React Router 4+, Webpack 3+</BuiltWith>
+    </Container>
+  </Outer>;
+Header.propTypes = {
+  className: PropTypes.string
+};
 export default Header;

src/client/components/Navbar/index.js

@@ -4,13 +4,14 @@ import styled from "styled-components";
 
 const Nav = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: center;
 `;
 
 const NavItem = styled.div`
-  padding: 10px;
+  padding: 10px 10px 10px 0;
   margin-right: 5px;
-  font-size: 1.5em;
+  font-size: 1em;
   ${StyledLink} {
     font-weight: bold;
     color: ${props => (props.active ? "#46b0ed" : "#515f71")};