Document Actions: Fix document title misalignment with an open nav si…

…debar (#25630) * Add nav sidebar width to base style variables * Update references to nav sidebar width * Use flex-basis to center document title with open sidebar open * Set nav sidebar is open body classname from editor index
WordPress · Sep 29, 2020 · 004a32e · 004a32e
1 parent 00818f1
commit 004a32e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -43,6 +43,7 @@ $button-size: 36px;
 $button-size-small: 24px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
+$nav-sidebar-width: 300px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	SlotFillProvider,
@@ -153,6 +153,16 @@ function Editor() {
 		[ page?.context ]
 	);
 
+	const isNavigationOpen = leftSidebarContent === 'navigation';
+
+	useEffect( () => {
+		if ( isNavigationOpen ) {
+			document.body.classList.add( 'is-navigation-sidebar-open' );
+		} else {
+			document.body.classList.remove( 'is-navigation-sidebar-open' );
+		}
+	}, [ isNavigationOpen ] );
+
 	const toggleLeftSidebarContent = ( value ) =>
 		setLeftSidebarContent( leftSidebarContent === value ? null : value );
 
@@ -220,8 +230,7 @@ function Editor() {
 															)
 														}
 														isNavigationOpen={
-															leftSidebarContent ===
-															'navigation'
+															isNavigationOpen
 														}
 														onToggleNavigation={ () =>
 															toggleLeftSidebarContent(

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -20,6 +20,13 @@
 	}
 }
 
+// Keeps the document title centered when the sidebar is open
+body.is-navigation-sidebar-open {
+	.edit-site-header_start {
+		flex-basis: $nav-sidebar-width;
+	}
+}
+
 .edit-site-header__toolbar {
 	display: flex;
 	padding-left: $grid-unit-30;

diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss
@@ -2,7 +2,7 @@
 	animation: edit-site-navigation-panel__slide-in 0.1s linear;
 	height: 100%;
 	position: relative;
-	width: 300px;
+	width: $nav-sidebar-width;
 	@include reduce-motion("animation");
 
 	@keyframes edit-site-navigation-panel__slide-in {
@@ -59,7 +59,7 @@
 .edit-site-navigation-panel__preview {
 	display: none;
 	border: $border-width solid $gray-400;
-	width: 300px;
+	width: $nav-sidebar-width;
 	padding: $grid-unit-20;
 	background: $white;
 	box-shadow: $shadow-popover;