diff --git a/images/play.svg b/images/play.svg
new file mode 100644
index 00000000..2c7648e8
--- /dev/null
+++ b/images/play.svg
@@ -0,0 +1,20 @@
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index 2bde10ed..88b17c86 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.8.0",
"css-loader": "^0.23.1",
+ "file-loader": "^0.8.5",
"node-sass": "^3.7.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
new file mode 100644
index 00000000..a73b2056
--- /dev/null
+++ b/shared/components/Toolbar/Toolbar.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+var playUrl = require('../../../images/play.svg');
+
+class Toolbar extends React.Component {
+ render() {
+ return (
+
+
![]({playUrl}/)
+
+ );
+ }
+}
+
+export default Toolbar;
\ No newline at end of file
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index c510d501..e81de5f6 100644
--- a/shared/containers/App/App.jsx
+++ b/shared/containers/App/App.jsx
@@ -2,6 +2,7 @@ import React from 'react';
import Editor from '../../components/Editor/Editor'
import PreviewFrame from '../../components/Preview/PreviewFrame'
import Preview from '../../components/Preview/Preview'
+import Toolbar from '../../components/Toolbar/Toolbar'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as FileActions from '../../redux/actions'
@@ -10,6 +11,8 @@ class App extends React.Component {
render() {
return (
+
diff --git a/styles/layout/_ide.scss b/styles/layout/_ide.scss
index b1f3633f..3073f85b 100644
--- a/styles/layout/_ide.scss
+++ b/styles/layout/_ide.scss
@@ -2,6 +2,7 @@
display: flex;
flex-direction: row;
height: 100%;
+ flex-wrap: wrap;
}
.editor-holder {
@@ -11,4 +12,8 @@
.preview-frame {
width: 50%;
+}
+
+.toolbar {
+ width: 100%;
}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index df7b146f..4fdd48e2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -29,6 +29,10 @@ module.exports = {
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
+ },
+ {
+ test: /\.svg$/,
+ loader: 'file'
}
],
},