diff --git a/src/components/Header/index.js b/src/components/Header/index.js index e6a1cef2..53792edb 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -114,7 +114,7 @@ const A = styled.a` type Props = { sidebarEnabled?: boolean, - sidebarOpened?: boolean, + sidebarOpened?: ?boolean, toggleSidebar?: toggleSidebarType, }; diff --git a/src/reducers/WalletReducer.js b/src/reducers/WalletReducer.js index 2bd6d657..0277ee4d 100644 --- a/src/reducers/WalletReducer.js +++ b/src/reducers/WalletReducer.js @@ -15,7 +15,7 @@ type State = { online: boolean; dropdownOpened: boolean; showBetaDisclaimer: boolean; - showSidebar: boolean; + showSidebar: ?boolean; initialParams: ?RouterLocationState; initialPathname: ?string; firstLocationChange: boolean; @@ -29,7 +29,7 @@ const initialState: State = { dropdownOpened: false, firstLocationChange: true, showBetaDisclaimer: false, - showSidebar: false, + showSidebar: null, initialParams: null, initialPathname: null, disconnectRequest: null, diff --git a/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js b/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js index a149cf8f..46cca306 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js @@ -9,7 +9,7 @@ import { SLIDE_RIGHT, SLIDE_LEFT } from 'config/animations'; type Props = { children?: React.Node, - isOpen: boolean, + isOpen: ?boolean, } type State = { @@ -32,6 +32,9 @@ const AbsoluteWrapper = styled.aside` height: calc(100vh - 52px); z-index: 200; top: 52px; + /* Prevents firing SLIDE_LEFT anim on page load. */ + /* isOpen is null until user clicks on menu toggler */ + display: ${props => (props.isOpen === null ? 'none' : 'block')}; animation: ${props => (props.isOpen ? SLIDE_RIGHT : SLIDE_LEFT)} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards; }