From 072c80f475605f104fe6bfea6a225dec4c84cb25 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 17 Dec 2018 18:30:00 +0100
Subject: Removes content transform on mobile nav toggle

---
 packages/website/ts/@next/components/mobileNav.tsx | 3 ++-
 packages/website/ts/@next/components/siteWrap.tsx  | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next')

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'};
 `;
-- 
cgit v1.2.3