Added functionality to the header

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>
-            <img src={ this.props.avatarUrl } />
-          </HeaderMenu>
+          <Flex align="center" className={ styles.title }>
+            { this.props.title }
+          </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;
+}