diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
index 8ed8c9e1..bab539c0 100644
--- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
@@ -17,11 +17,26 @@ type Props = {
const AsideWrapper = styled.aside`
position: relative;
+ top: 0;
width: 320px;
- min-width: 320px;
- overflow-x: hidden;
+ overflow: hidden;
background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
+
+ .fixed {
+ position: fixed;
+ border-right: 1px solid ${colors.DIVIDER};
+ }
+
+ .fixed-bottom {
+ padding-bottom: 60px;
+ .sticky-bottom {
+ position: fixed;
+ bottom: 0;
+ background: ${colors.MAIN};
+ border-right: 1px solid ${colors.DIVIDER};
+ }
+ }
`;
const StickyContainerWrapper = styled.div`
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index 07e643a8..dc57e112 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import Icon from 'components/Icon';
+import Sticky from 'react-sticky-el';
import icons from 'config/icons';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import styled from 'styled-components';
@@ -11,6 +12,8 @@ import CoinMenu from './components/CoinMenu';
import DeviceMenu from './components/DeviceMenu';
import StickyContainer from './components/StickyContainer';
+const Header = styled(DeviceHeader)``;
+
const TransitionGroupWrapper = styled(TransitionGroup)`
width: 640px;
`;
@@ -21,14 +24,15 @@ const TransitionContentWrapper = styled.div`
vertical-align: top;
`;
-const StickyBottom = styled.div`
+const Footer = styled.div`
position: fixed;
bottom: 0;
background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
`;
-const MenuWrapper = styled.div`
+const Body = styled.div`
+ overflow: auto;
background: ${colors.LANDING};
`;
@@ -40,11 +44,6 @@ const Help = styled.div`
width: 319px;
padding: 8px 0px;
border-top: 1px solid ${colors.DIVIDER};
-
- &.fixed {
- position: fixed;
- bottom: 0px;
- }
`;
const A = styled.a`
@@ -150,28 +149,25 @@ class LeftNavigation extends Component {
}
render() {
- const { selectedDevice } = this.props.wallet;
return (
- {selectedDevice && (
- this.handleOpen()}
- device={this.props.wallet.selectedDevice}
- transport={this.props.connect.transport}
- devices={this.props.devices}
- isOpen={this.props.deviceDropdownOpened}
- {...this.props}
- />
- ) }
-
+ this.handleOpen()}
+ device={this.props.wallet.selectedDevice}
+ transport={this.props.connect.transport}
+ devices={this.props.devices}
+ isOpen={this.props.deviceDropdownOpened}
+ {...this.props}
+ />
+
{this.state.shouldRenderDeviceSelection && }
{this.shouldRenderAccounts() && this.getMenuTransition()}
{this.shouldRenderCoins() && this.getMenuTransition()}
-
-
+
+
+
+
);
}
diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js
index 23674f79..e84feef3 100644
--- a/src/views/Wallet/index.js
+++ b/src/views/Wallet/index.js
@@ -83,7 +83,7 @@ const Wallet = (props: WalletContainerProps) => (
-
+ {props.wallet.selectedDevice && }