added layout and dependencies

Author: PolGuixe

package.json

@@ -41,5 +41,10 @@
     "jest": "^21.0.2"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
+    "material-ui": "^1.0.0-beta.9",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-controllables": "^0.6.0"
   }
 }

src/components/Layout/Layout.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import classNames from 'classnames';
+import Drawer from 'material-ui/Drawer';
+import controllable from 'react-controllables';
+
+import styles from './styles';
+
+import NavBar from '../NavBar';
+import Footer from '../Footer';
+
+// TODO create Layout Library
+
+class Layout extends React.PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    classes: PropTypes.shape({}),
+    children: PropTypes.element.isRequired,
+    navbarPostion: PropTypes.string,
+    stickyFooter: PropTypes.bool,
+    footerContent: PropTypes.element,
+    navBarContent: PropTypes.element,
+    drawerOpen: PropTypes.bool.isRequired,
+    onDrawerOpenChange: PropTypes.func,
+    drawerContent: PropTypes.element,
+    navBarProps: PropTypes.shape({}),
+    drawerProps: PropTypes.shape({}),
+    footerProps: PropTypes.shape({}),
+  };
+
+  static defaultProps = {
+    title: '',
+    navbarPostion: 'default',
+    stickyFooter: false,
+    drawerOpen: false,
+  };
+
+  handleDrawerClose = () => {
+    if (!this.props.onDrawerOpenChange) return;
+
+    this.props.onDrawerOpenChange(false);
+  };
+
+  toggleDrawer = () => {
+    if (!this.props.onDrawerOpenChange) return;
+
+    this.props.onDrawerOpenChange(!this.props.drawerOpen);
+  };
+
+  render() {
+    const {
+      title,
+      logo, // TODO what kind of logo can we expect?.....
+      classes,
+      children,
+      navbarPostion,
+      stickyFooter,
+      footerContent,
+      navBarContent,
+      drawerContent,
+      drawerOpen,
+      navBarProps,
+      drawerProps,
+      footerProps,
+    } = this.props;
+
+    const mainClassnames = classNames(
+      classes.main,
+      { [`${classes.mainFixedNavbar}`]: navbarPostion === 'fixed' },
+      { [`${classes.mainStickyFooter}`]: stickyFooter },
+    );
+
+    return (
+      <div className={classes.layout}>
+        <NavBar {...navBarProps} title={title} logo={logo} onIconClick={this.toggleDrawer}>
+          {navBarContent}
+        </NavBar>
+        {drawerContent ? (
+          <Drawer {...drawerProps} open={drawerOpen} onRequestClose={this.handleDrawerClose}>
+            {drawerContent}
+          </Drawer>
+        ) : null}
+        <main className={mainClassnames}>{children}</main>
+        {footerContent ? <Footer {...footerProps}>{footerContent}</Footer> : null}
+      </div>
+    );
+  }
+}
+
+export default controllable(withStyles(styles)(Layout), ['drawerOpen']);

src/components/Layout/index.js

@@ -0,0 +1,3 @@
+import Layout from './Layout';
+
+export default Layout;

src/components/Layout/styles.js

@@ -0,0 +1,24 @@
+const styles = {
+  layout: {
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column',
+  },
+  main: {
+    paddingTop: '0px',
+    display: 'flex',
+  },
+  mainFixedNavbar: {
+    marginTop: '64px',
+  },
+  mainStickyFooter: {
+    flex: 1,
+  },
+  '@media (max-width: 599px)': {
+    mainFixedNavbar: {
+      marginTop: '56px',
+    },
+  },
+};
+
+export default styles;