fix: adjust padding when drawers are open

Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
reactioncommerce · Apr 7, 2020 · 69223fe · 69223fe
1 parent 596beec
commit 69223fe
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/package/src/ContentLayout/ContentLayout.js b/package/src/ContentLayout/ContentLayout.js
@@ -35,9 +35,15 @@ const useStyles = makeStyles((theme) => ({
     overflow: "hidden"
   },
   leadingDrawerOpen: {
-    paddingLeft: theme.dimensions.drawerWidth
+    paddingLeft: theme.dimensions.drawerWidth + theme.spacing(2)
   },
   trailingDrawerOpen: {
+    paddingRight: theme.dimensions.detailDrawerWidth + theme.spacing(2)
+  },
+  leadingDrawerOpenFullLayout: {
+    paddingLeft: theme.dimensions.drawerWidth
+  },
+  trailingDrawerOpenFullLayout: {
     paddingRight: theme.dimensions.detailDrawerWidth
   }
 }));
@@ -55,8 +61,10 @@ const ContentLayout = ({
       className={
         clsx(classes.root, {
           [classes[`${size}Content`]]: true,
-          [classes.leadingDrawerOpen]: isLeadingDrawerOpen,
-          [classes.trailingDrawerOpen]: isTrailingDrawerOpen
+          [classes.leadingDrawerOpen]: isLeadingDrawerOpen && size !== "full",
+          [classes.trailingDrawerOpen]: isTrailingDrawerOpen && size !== "full",
+          [classes.leadingDrawerOpenFullLayout]: isLeadingDrawerOpen && size === "full",
+          [classes.trailingDrawerOpenFullLayout]: isTrailingDrawerOpen && size === "full"
         })
       }
     >