Added custom layout

src/admin/js/Layout.js

@@ -0,0 +1,37 @@
+/* globals APP_NAME */
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import AppBar from 'material-ui/AppBar';
+import CircularProgress from 'material-ui/CircularProgress';
+import Notification from 'admin-on-rest/lib/mui/layout/Notification';
+import Menu from 'admin-on-rest/lib/mui/layout/Menu';
+const Title = <Link to="/" style={{ color: '#fff', textDecoration: 'none' }}>{APP_NAME} - Administration</Link>;
+
+const Layout = ({ isLoading, children, route }) => (
+    <MuiThemeProvider>
+        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+            <AppBar title={Title} iconElementRight={isLoading ? <CircularProgress color="#fff" size={0.5} /> : <span/> } />
+            <div className="body" style={{ display: 'flex', flex: '1', backgroundColor: '#edecec' }}>
+                <div style={{ flex: 1 }}>{children}</div>
+                <Menu resources={route.resources} />
+            </div>
+            <Notification />
+        </div>
+    </MuiThemeProvider>
+);
+
+Layout.propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    children: PropTypes.node,
+    route: PropTypes.object.isRequired,
+};
+
+function mapStateToProps(state) {
+    return { isLoading: state.admin.loading > 0 };
+}
+
+export default connect(
+  mapStateToProps,
+)(Layout);

src/admin/js/main.js

@@ -5,6 +5,7 @@ import { render } from 'react-dom';
 import { Admin, Resource } from 'admin-on-rest';
 
 import restClient from './restClient';
+import Layout from './Layout';
 import { ProductList, ProductEdit, ProductCreate, ProductIcon } from './products';
 import { OrderList, OrderEdit, OrderCreate, OrderIcon } from './orders';
 
@@ -28,7 +29,7 @@ const tokenExpires = window.localStorage.getItem('expires');
 if (tokenExpires && tokenExpires < currentTime) logout();
 
 render(
-    <Admin restClient={restClient(ADMIN_API_URL, () => window.localStorage.getItem('token'), logout)}>
+    <Admin restClient={restClient(ADMIN_API_URL, () => window.localStorage.getItem('token'), logout)} appLayout={Layout}>
         <Resource name="products" list={ProductList} edit={ProductEdit} create={ProductCreate} icon={ProductIcon} />
         <Resource name="orders" list={OrderList} edit={OrderEdit} create={OrderCreate} icon={OrderIcon} />
     </Admin>,