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 && }