fix navigation sidebar being too wide for some phones - issue #421 (#590

) * fix navigation sidebar being too wide for some phones, fix bug which caused back method/titles on nav to be wrong after creating account and signing in * alphabetize consts * prettier pass
magento · Dec 11, 2018 · 7d4bae2 · 7d4bae2
1 parent 661d724
commit 7d4bae2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 16 deletions.
diff --git a/packages/venia-concept/src/components/CreateAccount/createAccount.css b/packages/venia-concept/src/components/CreateAccount/createAccount.css
@@ -1,6 +1,6 @@
 .createAccountButton {
     text-align: center;
-    margin-top: 2em;
+    margin: 1rem 0;
 }
 
 .rewards {

diff --git a/packages/venia-concept/src/components/Navigation/navigation.css b/packages/venia-concept/src/components/Navigation/navigation.css
@@ -12,7 +12,8 @@
     transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
     transition-property: opacity, transform, visibility;
     visibility: hidden;
-    width: 360px;
+    width: 100%;
+    max-width: 360px;
     z-index: 3;
 }
 
@@ -85,6 +86,7 @@
     position: absolute;
     right: 0;
     top: 0;
+    overflow-y: auto;
 }
 
 .signIn_open {

diff --git a/packages/venia-concept/src/components/Navigation/navigation.js b/packages/venia-concept/src/components/Navigation/navigation.js
@@ -217,23 +217,31 @@ class Navigation extends PureComponent {
         } = this;
 
         const { isCreateAccountOpen, isSignInOpen, rootNodeId } = state;
-        const { classes, closeDrawer, isOpen, rootCategoryId } = props;
+        const {
+            classes,
+            closeDrawer,
+            isOpen,
+            isSignedIn,
+            rootCategoryId
+        } = props;
         const className = isOpen ? classes.root_open : classes.root;
         const isTopLevel = !rootNodeId || rootNodeId === rootCategoryId;
 
-        const handleBack = isCreateAccountOpen
-            ? hideCreateAccountForm
-            : isSignInOpen
-            ? hideSignInForm
-            : isTopLevel
-            ? closeDrawer
-            : setRootNodeIdToParent;
+        const handleBack =
+            isCreateAccountOpen && !isSignedIn
+                ? hideCreateAccountForm
+                : isSignInOpen && !isSignedIn
+                ? hideSignInForm
+                : isTopLevel
+                ? closeDrawer
+                : setRootNodeIdToParent;
 
-        const title = isCreateAccountOpen
-            ? 'Create Account'
-            : isSignInOpen
-            ? 'Sign In'
-            : 'Main Menu';
+        const title =
+            isCreateAccountOpen && !isSignedIn
+                ? 'Create Account'
+                : isSignInOpen && !isSignedIn
+                ? 'Sign In'
+                : 'Main Menu';
 
         return (
             <aside className={className}>

diff --git a/packages/venia-concept/src/components/SignIn/signIn.css b/packages/venia-concept/src/components/SignIn/signIn.css
@@ -8,7 +8,7 @@
 .signInButton,
 .showCreateAccountButton {
     text-align: center;
-    margin: 1rem 0 0;
+    margin: 1rem 0;
 }
 
 .forgotPassword {