Add animated sandwich button

4 files changed, 30 insertions, 3 deletions

diff --git a/package.json b/package.json
index d7f41097f..bb15d658b 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "identicon.js": "^1.2.1",
     "inject-css": "^0.1.1",
     "jazzicon": "^1.1.3",
+    "menu-droppo": "^1.0.2",
     "metamask-logo": "^1.1.5",
     "multiplex": "^6.7.0",
     "once": "^1.3.3",
@@ -52,6 +53,7 @@
     "redux": "^3.0.5",
     "redux-logger": "^2.3.1",
     "redux-thunk": "^1.0.2",
+    "sandwich-expando": "^1.0.4",
     "textarea-caret": "^3.0.1",
     "three.js": "^0.73.2",
     "through2": "^2.0.1",
diff --git a/ui/app/actions.js b/ui/app/actions.js
index f489eede7..c08019d9c 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1,6 +1,9 @@
 var actions = {
   GO_HOME: 'GO_HOME',
   goHome: goHome,
+  // menu state
+  TOGGLE_MENU: 'TOGGLE_MENU',
+  toggleMenu: toggleMenu,
   // remote state
   UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
   updateMetamaskState: updateMetamaskState,
@@ -105,6 +108,14 @@ function goHome() {
   }
 }
 
+// menu state
+
+function toggleMenu() {
+  return {
+    type: this.TOGGLE_MENU,
+  }
+}
+
 // async actions
 
 function tryUnlockMetamask(password) {
diff --git a/ui/app/app.js b/ui/app/app.js
index 68d34e52f..ec869145e 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -24,6 +24,8 @@ const ConfigScreen = require('./config')
 const InfoScreen = require('./info')
 const LoadingIndicator = require('./loading')
 const txHelper = require('../lib/tx-helper')
+const SandwichExpando = require('sandwich-expando')
+const MenuDroppo = require('menu-droppo')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -42,6 +44,7 @@ function mapStateToProps(state) {
     seedWords: state.metamask.seedWords,
     unconfTxs: state.metamask.unconfTxs,
     unconfMsgs: state.metamask.unconfMsgs,
+    menuOpen: state.appState.menuOpen,
   }
 }
 
@@ -143,12 +146,17 @@ App.prototype.renderAppBar = function(){
         src: '/images/icon-128.png',
       }),
 
-      // metamask name
+      // metamask namlterChangese
       h('h1', 'MetaMask'),
 
       // hamburger
-      h('i.fa.fa-bars.cursor-pointer.color-orange', {
-        onClick: (event) => state.dispatch(actions.showConfigPage()),
+      h(SandwichExpando, {
+        width: 16,
+        barHeight: 2,
+        padding: 0,
+        isOpen: state.menuOpen,
+        color: 'rgb(247,146,30)',
+        onClick: () => this.props.dispatch(actions.toggleMenu()),
       }),
 
     ])
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 0e0740c9d..a7429c8fb 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -22,6 +22,7 @@ function reduceApp(state, action) {
   var seedWords = state.metamask.seedWords
 
   var appState = extend({
+    menuOpen: false,
     currentView: seedWords ? seedConfView : defaultView,
     accountDetail: {
       subview: 'transactions',
@@ -34,6 +35,11 @@ function reduceApp(state, action) {
 
   switch (action.type) {
 
+  case actions.TOGGLE_MENU:
+    return extend(appState, {
+      menuOpen: !appState.menuOpen,
+    })
+
   // intialize
 
   case actions.SHOW_CREATE_VAULT: