Added functionality to the header

src/components/Flex.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const Flex = (props) => {
+  const style = {
+    display: 'flex',
+    flex: props.flex ? '1' : null,
+    flexDirection: props.direction,
+    justifyContent: props.justify,
+    alignItems: props.align,
+  };
+
+  return (
+    <div style={ style } {...props}>
+      { props.children }
+    </div>
+  );
+};
+
+Flex.defaultProps = {
+  direction: 'row',
+  justify: null,
+  align: null,
+  flex: null,
+};
+
+Flex.propTypes = {
+  children: React.PropTypes.arrayOf(React.PropTypes.node).isRequired,
+  direction: React.PropTypes.string,
+  justify: React.PropTypes.string,
+  align: React.PropTypes.string,
+  flex: React.PropTypes.bool,
+};
+
+export default Flex;

src/components/Layout/Layout.js

@@ -3,12 +3,14 @@ import { connect } from 'react-redux';
 import Link from 'react-router/lib/Link';
 
 import HeaderMenu from './components/HeaderMenu';
+import Flex from 'components/Flex';
 
 import styles from './Layout.scss';
 
 class Layout extends React.Component {
   static propTypes = {
-
+    actions: React.PropTypes.arrayOf(React.PropTypes.node),
+    title: React.PropTypes.node,
   }
 
   render() {
@@ -18,9 +20,17 @@ class Layout extends React.Component {
           <div className={ styles.teamName }>
             <Link to="/">{ this.props.teamName }</Link>
           </div>
-          <HeaderMenu>
+          <Flex align="center" className={ styles.title }>
-            <img src={ this.props.avatarUrl } />
+            { this.props.title }
-          </HeaderMenu>
+          </Flex>
+          <Flex direction="row">
+            <Flex align="center" className={ styles.actions }>
+              { this.props.actions }
+            </Flex>
+            <HeaderMenu>
+              <img src={ this.props.avatarUrl } />
+            </HeaderMenu>
+          </Flex>
         </div>
         <div className={ styles.content }>
           { this.props.children }

src/components/Layout/Layout.scss

@@ -16,6 +16,8 @@
 
   height: 42px;
   border-bottom: 1px solid #eee;
+
+  font-size: 14px;
 }
 
 .teamName a {
@@ -23,9 +25,19 @@
   font-weight: bold;
   color: $textColor;
   text-decoration: none;
+  font-size: 16px;
 }
 
 .content {
   display: flex;
   justify-content: center;
 }
+
+.title {
+  color: #444;
+}
+
+.actions a {
+  text-decoration: none;
+  margin-right: 15px;
+}

src/scenes/Atlas/Atlas.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Link from 'react-router/lib/Link';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { replace } from 'react-router-redux';
@@ -44,7 +45,12 @@ class Atlas extends React.Component {
     const data = this.state.data;
 
     return (
-      <Layout>
+      <Layout
+        actions={(
+          <Link to="/new-document">New document</Link>
+        )}
+        title={ data.name }
+      >
         <CenteredContent>
           { this.state.isLoading ? (
             <AtlasPreviewLoading />