fix backdrop still visible after closing app settings on small screens

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

@@ -1,5 +1,5 @@
 /* @flow */
-import { toggleDeviceDropdown } from 'actions/WalletActions';
+import { toggleDeviceDropdown, toggleSidebar } from 'actions/WalletActions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
@@ -42,6 +42,7 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
     gotoDeviceSettings: bindActionCreators(RouterActions.gotoDeviceSettings, dispatch),
     onSelectDevice: bindActionCreators(RouterActions.selectDevice, dispatch),
     gotoExternalWallet: bindActionCreators(ModalActions.gotoExternalWallet, dispatch),
+    toggleSidebar: bindActionCreators(toggleSidebar, dispatch),
 });
 
 export default withRouter(

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

@@ -3,13 +3,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, SCREEN_SIZE } from 'config/variables';
 import Icon from 'components/Icon';
 import WalletTypeIcon from 'components/images/WalletType';
 import icons from 'config/icons';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import styled from 'styled-components';
 import DeviceHeader from 'components/DeviceHeader';
+import Backdrop from 'components/Backdrop';
 // import Link from 'components/Link';
 import * as deviceUtils from 'utils/device';
 
@@ -98,6 +99,14 @@ type TransitionMenuProps = {
     children?: React.Node,
 };
 
+const StyledBackdrop = styled(Backdrop)`
+    display: none;
+
+    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
+        display: initial;
+    }
+`;
+
 // TransitionMenu needs to dispatch window.resize event
 // in order to StickyContainer be recalculated
 const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => (
@@ -254,6 +263,12 @@ class LeftNavigation extends React.PureComponent<Props, State> {
             selectedDevice && selectedDevice.connected && selectedDevice.available;
 
         return (
+            <>
+                <StyledBackdrop
+                    show={props.wallet.showSidebar}
+                    onClick={props.toggleSidebar}
+                    animated
+                />
                 <Sidebar isOpen={props.wallet.showSidebar}>
                     <Header
                         isSelected
@@ -304,7 +319,9 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                                 {this.props.devices.length > 1 && (
                                     <Tooltip
                                         content={
-                                        <FormattedMessage {...l10nMessages.TR_NUMBER_OF_DEVICES} />
+                                            <FormattedMessage
+                                                {...l10nMessages.TR_NUMBER_OF_DEVICES}
+                                            />
                                         }
                                         maxWidth={200}
                                         placement="bottom"
@@ -362,6 +379,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                         </Help>
                     </Footer>
                 </Sidebar>
+            </>
         );
     }
 }

src/views/Wallet/index.js

@@ -23,7 +23,6 @@ import ContextNotifications from 'components/notifications/Context';
 import { SCREEN_SIZE } from 'config/variables';
 
 import Log from 'components/Log';
-import Backdrop from 'components/Backdrop';
 
 import LeftNavigation from './components/LeftNavigation/Container';
 import TopNavigationAccount from './components/TopNavigationAccount';
@@ -110,14 +109,6 @@ const Body = styled.div`
     flex-direction: column;
 `;
 
-const StyledBackdrop = styled(Backdrop)`
-    display: none;
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        display: initial;
-    }
-`;
-
 const Wallet = (props: Props) => (
     <AppWrapper>
         <Header
@@ -127,11 +118,6 @@ const Wallet = (props: Props) => (
         />
         <AppNotifications />
         <WalletWrapper>
-            <StyledBackdrop
-                show={props.wallet.showSidebar}
-                onClick={props.toggleSidebar}
-                animated
-            />
             {props.wallet.selectedDevice && <LeftNavigation />}
             <MainContent preventBgScroll={props.wallet.showSidebar}>
                 <Navigation>