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