[default-layout] Improve layout of SideMenu

sanity-io · Oct 6, 2020 · cb5c4d9 · cb5c4d9
1 parent 12312a0
commit cb5c4d9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/@sanity/default-layout/src/navbar/sideMenu/SideMenu.css b/packages/@sanity/default-layout/src/navbar/sideMenu/SideMenu.css
@@ -3,6 +3,7 @@
 :root {
   --side-menu-color: var(--component-bg);
   --side-menu-color-inverted: var(--component-text-color);
+  --side-menu-margin-right: 49px;
 }
 
 .root {
@@ -28,6 +29,7 @@
   transform: translate(-100%);
   pointer-events: all;
   padding-left: env(safe-area-inset-left);
+  margin-right: var(--side-menu-margin-right);
 }
 
 .root.isOpen {
@@ -45,15 +47,17 @@
 }
 
 .closeButtonContainer {
-  padding: 4px;
+  padding: calc(var(--medium-padding) - var(--extra-small-padding));
 }
 
 .userProfile {
   flex: 1;
   min-width: 0;
   display: flex;
   align-items: center;
-  padding: 0.5em;
+  padding: calc(var(--medium-padding) - var(--extra-small-padding)) 0
+    calc(var(--medium-padding) - var(--extra-small-padding))
+    calc(var(--medium-padding) - var(--extra-small-padding));
 }
 
 .userAvatarContainer {

diff --git a/packages/@sanity/default-layout/src/navbar/sideMenu/SideMenu.tsx b/packages/@sanity/default-layout/src/navbar/sideMenu/SideMenu.tsx
@@ -44,6 +44,7 @@ function SideMenu(props: Props) {
                 icon={CloseIcon}
                 kind="simple"
                 onClick={onClose}
+                padding="small"
                 tabIndex={tabIndex}
                 title="Close menu"
               />

diff --git a/packages/@sanity/default-layout/src/navbar/toolMenu/ToolMenu.tsx b/packages/@sanity/default-layout/src/navbar/toolMenu/ToolMenu.tsx
@@ -53,7 +53,7 @@ function ToolMenu(props: Props) {
                   key={tool.name}
                   kind="simple"
                   onClick={onSwitchTool}
-                  padding="small"
+                  padding={direction === 'horizontal' ? 'small' : 'medium'}
                   selected={activeToolName === tool.name}
                   state={{...router.state, tool: tool.name, [tool.name]: undefined}}
                   title={title}