layout updates

.eslintrc

@@ -16,6 +16,7 @@
     "no-underscore-dangle": 0,
     "react/jsx-filename-extension": 0,
     "react/jsx-curly-brace-presence": 0,
+    "react/prefer-stateless-function": 0,
     "jsx-a11y/anchor-is-valid": 0,
   },
   "settings": {

src/components/App.js

@@ -7,13 +7,23 @@ import { Provider } from 'react-redux'
 import { Route } from 'react-router'
 
 import theme from 'styles/theme'
+
+import Box from 'components/base/Box'
+import SideBar from 'components/SideBar'
+import TopBar from 'components/TopBar'
 import Home from 'components/Home'
 
 export default ({ store, history }: { store: Object, history: Object }) => (
   <Provider store={store}>
     <ThemeProvider theme={theme}>
       <ConnectedRouter history={history}>
-        <Route path="/" component={Home} />
+        <Box grow horizontal>
+          <SideBar />
+          <Box grow bg="cream">
+            <TopBar />
+            <Route path="/" component={Home} />
+          </Box>
+        </Box>
       </ConnectedRouter>
     </ThemeProvider>
   </Provider>

src/components/SideBar.js

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+
+class SideBar extends PureComponent {
+  render() {
+    return (
+      <Box bg="night" py={3} noShrink style={{ width: 250 }}>
+        {''}
+      </Box>
+    )
+  }
+}
+
+export default SideBar

src/components/TopBar.js

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+
+class TopBar extends PureComponent {
+  render() {
+    return (
+      <Box bg="white" noShrink style={{ height: 60 }}>
+        {''}
+      </Box>
+    )
+  }
+}
+
+export default TopBar