From b7c0602a2c4caba15cfe4d14711ae8052a1f7746 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 8 Nov 2016 16:32:09 -0300
Subject: [PATCH] Header, Drawer, Layout

---
 client/coral-admin/src/AppRouter.js               |  1 +
 client/coral-admin/src/components/Header.js       | 15 ++-------------
 client/coral-admin/src/components/ui/Drawer.js    | 14 ++++++++++++++
 client/coral-admin/src/components/ui/Layout.js    | 10 ++++++++--
 .../coral-admin/src/containers/LayoutContainer.js |  2 +-
 5 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100644 client/coral-admin/src/components/ui/Drawer.js

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 85bfbd49d..55ff1a90f 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -8,6 +8,7 @@ import CommentStream from 'containers/CommentStream'
 import EmbedLink from 'components/EmbedLink'
 import Configure from 'containers/Configure'
 import CommunityContainer from 'containers/CommunityContainer'
+import LayoutContainer from 'containers/LayoutContainer'
 
 const routes = (
   <Route path={config.base} component={LayoutContainer}>
diff --git a/client/coral-admin/src/components/Header.js b/client/coral-admin/src/components/Header.js
index 6aed77913..ed60f497b 100644
--- a/client/coral-admin/src/components/Header.js
+++ b/client/coral-admin/src/components/Header.js
@@ -1,12 +1,9 @@
 import React from 'react'
-import { Layout, Navigation, Drawer, Header } from 'react-mdl'
+import { Navigation, Header } from 'react-mdl'
 import { Link } from 'react-router'
 import styles from './Header.css'
-import config from 'services/config'
 
-// App header. If we add a navbar it should be here
-export default (props) => (
-  <Layout fixedDrawer>
+export default () => (
     <Header title='Talk'>
       <Navigation>
         <Link className={styles.navLink} to="/">Moderate</Link>
@@ -14,12 +11,4 @@ export default (props) => (
         <Link className={styles.navLink} to="configure">Configure</Link>
       </Navigation>
     </Header>
-    <Drawer>
-      <Navigation>
-        <Link className={styles.navLink} to={`/${config.basePath}/`}>Moderate</Link>
-        <Link className={styles.navLink} to={`/${config.basePath}/configure`}>Configure</Link>
-      </Navigation>
-    </Drawer>
-    {props.children}
-  </Layout>
 )
diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js
new file mode 100644
index 000000000..ffb77fbfe
--- /dev/null
+++ b/client/coral-admin/src/components/ui/Drawer.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Navigation, Drawer } from 'react-mdl'
+import { Link } from 'react-router'
+import styles from './Header.css'
+import config from 'services/config'
+
+export default () => (
+  <Drawer>
+    <Navigation>
+      <Link className={styles.navLink} to={`/${config.basePath}/`}>Moderate</Link>
+      <Link className={styles.navLink} to={`/${config.basePath}/configure`}>Configure</Link>
+    </Navigation>
+  </Drawer>
+)
diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js
index 1daac2d8d..cdc2f5b41 100644
--- a/client/coral-admin/src/components/ui/Layout.js
+++ b/client/coral-admin/src/components/ui/Layout.js
@@ -1,5 +1,11 @@
 import React from 'react'
+import { Layout as LayoutMDL} from 'react-mdl'
+import Header from '../Header'
 
-export const Layout = () => (
-
+export const Layout = ({ children }) => (
+  <LayoutMDL fixedDrawer>>
+    <Header />
+    <Drawer />
+    {children}
+  </LayoutMDL>
 )
\ No newline at end of file
diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index 1d0c0d4f5..a96d73505 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -1,7 +1,7 @@
 import React, { Component }from 'react'
 import { connect } from 'react-redux'
 
-import Layout from '../components/ui/Layout'
+import { Layout } from '../components/ui/Layout'
 
 class LayoutContainer extends Component {
   render () {