Finance: add menu button for responsive navigation

aragon · Jan 11, 2019 · ff5fd8d · ff5fd8d
1 parent 0079f8d
commit ff5fd8d
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/apps/finance/app/src/App.js b/apps/finance/app/src/App.js
@@ -11,10 +11,13 @@ import {
   PublicUrl,
   SidePanel,
   observe,
+  font,
+  BreakPoint,
 } from '@aragon/ui'
 import Balances from './components/Balances'
 import NewTransferPanelContent from './components/NewTransfer/PanelContent'
 import Transfers from './components/Transfers'
+import MenuButton from './components/MenuButton/MenuButton'
 import { networkContextType } from './lib/provideNetwork'
 import { ETHER_TOKEN_FAKE_ADDRESS } from './lib/token-utils'
 import { makeEtherscanBaseUrl } from './lib/utils'
@@ -85,6 +88,11 @@ class App extends React.Component {
     app.deposit(tokenAddress, amount, reference, intentParams)
     this.handleNewTransferClose()
   }
+
+  handleMenuPanelOpen = () => {
+    this.props.sendMessageToWrapper('menuPanel', true)
+  }
+
   render() {
     const {
       app,
@@ -103,7 +111,14 @@ class App extends React.Component {
           <AppView
             appBar={
               <AppBar
-                title="Finance"
+                title={
+                  <Title>
+                    <BreakPoint to="medium">
+                      <MenuButton onClick={this.handleMenuPanelOpen} />
+                    </BreakPoint>
+                    <TitleLabel>Finance</TitleLabel>
+                  </Title>
+                }
                 endContent={
                   <Button mode="strong" onClick={this.handleNewTransferOpen}>
                     New Transfer
@@ -156,6 +171,15 @@ class App extends React.Component {
   }
 }
 
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+`
+
+const TitleLabel = styled.span`
+  ${font({ size: 'xxlarge' })};
+`
+
 const Main = styled.div`
   height: 100vh;
 `