Split up Layout on Container and Header for better control over Headerbar from components

1 files changed, 29 insertions, 7 deletions

diff --git a/app/components/Layout.js b/app/components/Layout.js
index 7619f3df4f..b0cc0a8420 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -1,19 +1,41 @@
 import React, { PropTypes, Component } from 'react';
 import HeaderBar from './HeaderBar';
 
-export default class Layout extends Component {
+export class Header extends Component {
+
+  static Style = HeaderBar.Style
+
+  render() {
+    return (
+      <div className="layout__header">
+        <HeaderBar {...this.props} />
+      </div>
+    )
+  }
+}
+
+export class Container extends Component {
   static propTypes = {
     children: PropTypes.element.isRequired
   };
+
+  render() {
+    return (
+      <div className="layout__container">
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export class Layout extends Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.node).isRequired
+  };
   render() {
     return (
       <div className="layout">
-        <div className="layout__header">
-          <HeaderBar />
-        </div>
-        <div className="layout__container">
-          {this.props.children}
-        </div>
+        {this.props.children}
       </div>
     );
   }