Navigation + background

js/components/launcher/category-header.js

@@ -3,11 +3,6 @@ var React = require('react');
 module.exports = React.createClass({
 
   propTypes: {
-    onBackClick: React.PropTypes.func.isRequired,
-    itemPath: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.arrayOf(React.PropTypes.number)
-    ]).isRequired,
     item: React.PropTypes.object.isRequired,
   },
 
@@ -15,16 +10,10 @@ module.exports = React.createClass({
 
     return (
       <div className="category-header">
-        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
         <span className="category-label">{this.props.item.label}</span>
       </div>
     );
 
-  },
-
-  _onBackClick: function(evt) {
-    evt.preventDefault();
-    this.props.onBackClick(this.props.itemPath, this.props.item);
   }
 
 });

js/components/launcher/launcher-view.js

@@ -1,6 +1,7 @@
 var React = require('react');
 var CategoryHeader = require('./category-header.js');
 var AppList = require('./app-list.js');
+var Nav = require('./nav.js');
 var AnimateMixin = require('../mixins/animate');
 var actions = require('../../store/actions');
 var connect = require('react-redux').connect;
@@ -39,19 +40,34 @@ var LauncherView = React.createClass({
 
     var header = currentItemPath !== '' ?
       ( <CategoryHeader
+          item={currentItem} /> ) :
+      null
+    ;
+
+    var nav = currentItemPath !== '' ?
+      ( <Nav
           onBackClick={this.onBackClick}
           item={currentItem}
           itemPath={currentItemPath} /> ) :
       null
     ;
 
+    var style = {};
+
+    if(currentItem && currentItem.background) {
+      style.backgroundImage = 'url('+currentItem.background+')';
+    }
+
     return (
-      <div className="launcher">
+      <div className="launcher" style={style}>
         {header}
-        <AppList ref="appList"
-          items={items}
-          parentPath={currentItemPath}
-          onItemClick={this.onItemClick} />
+        <div className="main">
+          {nav}
+          <AppList ref="appList"
+            items={items}
+            parentPath={currentItemPath}
+            onItemClick={this.onItemClick} />
+        </div>
       </div>
     );
 

js/components/launcher/nav.js

@@ -0,0 +1,30 @@
+/* jshint node: true jsx: true */
+var React = require('react');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    onBackClick: React.PropTypes.func.isRequired,
+    itemPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    item: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+
+    return (
+      <div className="nav">
+        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
+      </div>
+    );
+
+  },
+
+  _onBackClick: function(evt) {
+    evt.preventDefault();
+    this.props.onBackClick(this.props.itemPath, this.props.item);
+  }
+
+});