Enable collection and sketch to be created from dashboard page

client/modules/User/pages/DashboardView.jsx

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { browserHistory } from 'react-router';
+import { browserHistory, Link } from 'react-router';
-
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
 import Nav from '../../../components/Nav';
 
@@ -61,6 +60,22 @@ class DashboardView extends React.Component {
     return this.props.user.username === this.props.params.username;
   }
 
+  renderActionButton(tabKey, username) {
+    if (!this.isOwner()) {
+      return null;
+    }
+
+    switch (tabKey) {
+      case TabKey.assets:
+        return null;
+      case TabKey.collections:
+        return <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
+      case TabKey.sketches:
+      default:
+        return <Link className="dashboard__action-button" to="/">New sketch</Link>;
+    }
+  }
+
   renderContent(tabKey, username) {
     switch (tabKey) {
       case TabKey.assets:
@@ -85,9 +100,11 @@ class DashboardView extends React.Component {
         <section className="dashboard-header">
           <div className="dashboard-header__header">
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
-
+            <div className="dashboard-header__actions">
-            <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+              <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
-            { currentTab === TabKey.sketches && <Searchbar /> }
+              {currentTab === TabKey.sketches && <Searchbar />}
+              {this.renderActionButton(currentTab, username)}
+            </div>
           </div>
 
           <div className="dashboard-content">

client/styles/components/_dashboard-header.scss

@@ -50,3 +50,14 @@
   font-weight: bold;
   margin: 0;
 }
+
+.dashboard-header__actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dashboard__action-button {
+  flex-grow: 0;
+  @extend %button;
+}