From 7767f9f7ad7321d88a0b738d2c272961cc1ce286 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Wed, 2 Aug 2017 13:03:36 -0700
Subject: [PATCH] Hook up responsive sidebar

---
 ui/app/actions.js                |  3 +++
 ui/app/components/wallet-view.js |  4 ++--
 ui/app/main-container.js         | 12 +++++++++++-
 ui/app/reducers/app.js           | 11 +++++++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 0a9d347aa..0083543b4 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -5,6 +5,9 @@ var actions = {
 
   GO_HOME: 'GO_HOME',
   goHome: goHome,
+  // sidebar state
+  SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN',
+  SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
   // menu state
   getNetworkStatus: 'getNetworkStatus',
   // transition state
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 97c881483..63335dd93 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -31,9 +31,9 @@ const noop = () => {}
 
 WalletView.prototype.render = function () {
   const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684'
-  const { network } = this.props
+  const { network, responsiveDisplayClassname } = this.props
 
-  return h('div.wallet-view.flex-column.lap-visible', {
+  return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {
       // width: '33.333%',
       flexGrow: 1,
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index 592f331b5..fb768c386 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const WalletView = require('./components/wallet-view')
 const TxView = require('./components/tx-view')
+const SlideoutMenu = require('react-burger-menu').slide
 
 module.exports = MainContainer
 
@@ -28,9 +29,18 @@ MainContainer.prototype.render = function () {
     }
   }, [
 
+    h(SlideoutMenu, {
+      isOpen: true,
+    }, [
+      h(WalletView, {
+        responsiveDisplayClassname: '.phone-visible'
+      }),
+    ]),
+
     h(WalletView, {
       style: {
-      }
+      },
+      responsiveDisplayClassname: '.lap-visible',
     }, [
     ]),
 
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 2fcc9bfe0..bf1de4577 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -36,6 +36,7 @@ function reduceApp (state, action) {
   var appState = extend({
     shouldClose: false,
     menuOpen: false,
+    sidebarOpen: false,
     currentView: seedWords ? seedConfView : defaultView,
     accountDetail: {
       subview: 'transactions',
@@ -46,6 +47,16 @@ function reduceApp (state, action) {
   }, state.appState)
 
   switch (action.type) {
+    // sidebar methods
+    case actions.SIDEBAR_OPEN:
+      return extend(appState, {
+        sidebarOpen: true,
+      })
+
+    case actions.SIDEBAR_CLOSE:
+      return extend(appState, {
+        sidebarOpen: false,
+      })
 
     // transition methods