Header, Drawer, Layout

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}>

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>
 )

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>
+)

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>
 )

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 () {