add overlay with calculated height based on leftmenu body height

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 
 import COLORS from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
-import { SLIDE_DOWN } from 'config/animations';
+import { SLIDE_DOWN, FADE_IN } from 'config/animations';
 
 import Button from 'components/Button';
 import * as deviceUtils from 'utils/device';
@@ -14,10 +14,15 @@ import l10nCommonMessages from 'views/common.messages';
 import MenuItems from './components/MenuItems';
 import DeviceList from './components/DeviceList';
 
-import type { Props } from '../common';
+import type { Props as BaseProps } from '../common';
 
 import Divider from '../Divider';
 
+type OwnProps = {
+    overlayHeight: number,
+};
+type Props = BaseProps & OwnProps;
+
 const Wrapper = styled.div`
     position: absolute;
     z-index: 1;
@@ -29,6 +34,14 @@ const Wrapper = styled.div`
     animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;
 `;
 
+const Overlay = styled.div`
+    position: absolute;
+    width: 100%;
+    height: ${props => `${props.height}px`};
+    background: rgba(0, 0, 0, 0.2);
+    animation: ${FADE_IN} 0.25s;
+`;
+
 const ButtonWrapper = styled.div`
     margin: 10px 0;
     padding: 0 10px;
@@ -116,28 +129,36 @@ class DeviceMenu extends PureComponent<Props> {
     myRef: { current: ?HTMLDivElement };
 
     render() {
-        const { devices, onSelectDevice, forgetDevice } = this.props;
+        const { devices, onSelectDevice, forgetDevice, toggleDeviceDropdown } = this.props;
         const { transport } = this.props.connect;
-        const { selectedDevice } = this.props.wallet;
+        const { selectedDevice, dropdownOpened } = this.props.wallet;
 
         return (
-            <Wrapper ref={this.myRef}>
-                {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
-                {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
-                <DeviceList
-                    devices={devices}
-                    selectedDevice={selectedDevice}
-                    onSelectDevice={onSelectDevice}
-                    forgetDevice={forgetDevice}
+            <>
+                <Wrapper ref={this.myRef}>
+                    {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
+                    {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
+                    <DeviceList
+                        devices={devices}
+                        selectedDevice={selectedDevice}
+                        onSelectDevice={onSelectDevice}
+                        forgetDevice={forgetDevice}
+                    />
+                    {deviceUtils.isWebUSB(transport) && (
+                        <ButtonWrapper>
+                            <StyledButton isWebUsb>
+                                <FormattedMessage {...l10nCommonMessages.TR_CHECK_FOR_DEVICES} />
+                            </StyledButton>
+                        </ButtonWrapper>
+                    )}
+                </Wrapper>
+                <Overlay
+                    onClick={() => {
+                        toggleDeviceDropdown(!dropdownOpened);
+                    }}
+                    height={this.props.overlayHeight}
                 />
-                {deviceUtils.isWebUSB(transport) && (
-                    <ButtonWrapper>
-                        <StyledButton isWebUsb>
-                            <FormattedMessage {...l10nCommonMessages.TR_CHECK_FOR_DEVICES} />
-                        </StyledButton>
-                    </ButtonWrapper>
-                )}
-            </Wrapper>
+            </>
         );
     }
 }

src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js

@@ -9,6 +9,7 @@ import { SLIDE_RIGHT, SLIDE_LEFT } from 'config/animations';
 type Props = {
     children?: React.Node,
     isOpen: ?boolean,
+    deviceMenuOpened: boolean,
 };
 
 type State = {
@@ -18,7 +19,7 @@ type State = {
 const AbsoluteWrapper = styled.aside`
     width: 320px;
     position: relative;
-    overflow-y: auto;
+    overflow-y: ${props => (props.deviceMenuOpened ? 'hidden' : 'auto')};
 
     background: ${colors.MAIN};
     border-top-left-radius: 4px;
@@ -28,7 +29,6 @@ const AbsoluteWrapper = styled.aside`
 
     @media screen and (max-width: ${SCREEN_SIZE.SM}) {
         position: absolute;
-        height: calc(100vh - 52px);
         z-index: 200;
         top: 52px;
         /* Prevents firing SLIDE_LEFT anim on page load.  */
@@ -47,12 +47,19 @@ const SidebarWrapper = styled.div`
     height: 100%;
     display: flex;
     flex-direction: column;
+
+    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
+        height: calc(100vh - 52px);
+    }
 `;
 
 export default class Sidebar extends React.PureComponent<Props, State> {
     render() {
         return (
-            <AbsoluteWrapper isOpen={this.props.isOpen}>
+            <AbsoluteWrapper
+                isOpen={this.props.isOpen}
+                deviceMenuOpened={this.props.deviceMenuOpened}
+            >
                 <SidebarWrapper>{this.props.children}</SidebarWrapper>
             </AbsoluteWrapper>
         );

src/views/Wallet/components/LeftNavigation/index.js

@@ -59,6 +59,7 @@ const TransitionContentWrapper = styled.div`
 const Footer = styled.div.attrs(props => ({
     style: { position: props.position },
 }))`
+    flex: 0 0 auto;
     width: 320px;
     bottom: 0;
     background: ${colors.MAIN};
@@ -162,18 +163,21 @@ type State = {
     animationType: ?string,
     clicked: boolean,
     bodyMinHeight: number,
+    bodyHeight: number,
 };
 
 class LeftNavigation extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         this.deviceMenuRef = React.createRef();
+        this.leftMenuBodyRef = React.createRef();
         const { location } = this.props.router;
         const hasNetwork = location && location.state && location.state.network;
         this.state = {
             animationType: hasNetwork ? 'slide-left' : null,
             clicked: false,
             bodyMinHeight: 0,
+            bodyHeight: 0,
         };
     }
 
@@ -230,10 +234,17 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                 bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(),
             });
         }
+        if (this.leftMenuBodyRef.current) {
+            this.setState({
+                bodyHeight: this.leftMenuBodyRef.current.getBoundingClientRect().height,
+            });
+        }
     }
 
     deviceMenuRef: { current: any };
 
+    leftMenuBodyRef: { current: any };
+
     render() {
         const { props } = this;
         let menu;
@@ -269,7 +280,10 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                     onClick={props.toggleSidebar}
                     animated
                 />
-                <Sidebar isOpen={props.wallet.showSidebar}>
+                <Sidebar
+                    isOpen={props.wallet.showSidebar}
+                    deviceMenuOpened={this.props.wallet.dropdownOpened}
+                >
                     <Header
                         isSelected
                         testId="Main__page__device__header"
@@ -362,8 +376,14 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                         }
                         {...this.props}
                     />
-                    <Body minHeight={this.state.bodyMinHeight}>
-                        {dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
+                    <Body ref={this.leftMenuBodyRef} minHeight={this.state.bodyMinHeight}>
+                        {dropdownOpened && (
+                            <DeviceMenu
+                                ref={this.deviceMenuRef}
+                                overlayHeight={this.state.bodyHeight}
+                                {...this.props}
+                            />
+                        )}
                         {isDeviceAccessible && menu}
                     </Body>
                     <Footer data-test="Main__page__footer" key="sticky-footer">