Merge pull request #21 from satoshilabs/fix-sticky-menu

Fix sticky menu
6 years ago · c00dddd123
parent b2bbd99a05 65192013cb
commit c00dddd123
3 changed files with 37 additions and 25 deletions
--- 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`
--- 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 (
            <StickyContainer
                location={this.props.location.pathname}
                deviceSelection={this.props.deviceDropdownOpened}
            >
-                {selectedDevice && (
-                    <DeviceHeader
-                        onClickWrapper={() => this.handleOpen()}
-                        device={this.props.wallet.selectedDevice}
-                        transport={this.props.connect.transport}
-                        devices={this.props.devices}
-                        isOpen={this.props.deviceDropdownOpened}
-                        {...this.props}
-                    />
-                ) }
-                <MenuWrapper>
+                <Header
+                    onClickWrapper={() => this.handleOpen()}
+                    device={this.props.wallet.selectedDevice}
+                    transport={this.props.connect.transport}
+                    devices={this.props.devices}
+                    isOpen={this.props.deviceDropdownOpened}
+                    {...this.props}
+                />
+                <Body>
                    {this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
                    {this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
                    {this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)}
-                </MenuWrapper>
-                <StickyBottom>
+                </Body>
+                <Footer className="sticky-bottom">
                    <Help>
                        <A
                            href="https://trezor.io/support/"
@ -181,7 +177,8 @@ class LeftNavigation extends Component {
                            <Icon size={26} icon={icons.CHAT} color={colors.TEXT_SECONDARY} />Need help?
                        </A>
                    </Help>
-                </StickyBottom>
+                </Footer>
+                <Sticky />
            </StickyContainer>
        );
    }
--- a/src/views/Wallet/index.js
+++ b/src/views/Wallet/index.js
@ -83,7 +83,7 @@ const Wallet = (props: WalletContainerProps) => (
    <AppWrapper>
        <Header />
        <WalletWrapper>
-            <LeftNavigation />
+            {props.wallet.selectedDevice && <LeftNavigation />}
            <MainContent>
                <Navigation>
                    <Route path="/device/:device/network/:network/account/:account" component={TopNavigationAccount} />