diff options
| -rw-r--r-- | packages/website/ts/@next/components/mobileNav.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 1 |
2 files changed, 2 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx index ec1e76366..8b5ffd7e8 100644 --- a/packages/website/ts/@next/components/mobileNav.tsx +++ b/packages/website/ts/@next/components/mobileNav.tsx @@ -70,8 +70,9 @@ const Wrap = styled.nav<{ isToggled: boolean }>` height: 357px; background-color: ${props => props.theme.mobileNavBgUpper}; color: ${props => props.theme.mobileNavColor}; - transition: transform 0.5s; + transition: ${props => props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s'}; transform: translate3d(0, ${props => props.isToggled ? 0 : '-100%'}, 0); + visibility: ${props => !props.isToggled && 'hidden'}; position: fixed; display: flex; flex-direction: column; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index dae15110b..ad7691885 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -145,6 +145,5 @@ export class SiteWrap extends React.Component<Props, State> { const Main = styled.main<MainProps>` transition: transform 0.5s, opacity 0.5s; - transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0); opacity: ${props => props.isNavToggled && '0.5'}; `; |