From 004a32ec09d5b789be694d85725fe49cca385f08 Mon Sep 17 00:00:00 2001
From: Jeremy Yip <jeremy.yip@automattic.com>
Date: Tue, 29 Sep 2020 16:41:47 -0700
Subject: [PATCH] Document Actions: Fix document title misalignment with an
 open nav sidebar (#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
---
 packages/base-styles/_variables.scss              |  1 +
 packages/edit-site/src/components/editor/index.js | 15 ++++++++++++---
 .../edit-site/src/components/header/style.scss    |  7 +++++++
 .../left-sidebar/navigation-panel/style.scss      |  4 ++--
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 4f81cf05b2b66..cfae25accb1b1 100644
--- 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
index 74f0dbc5fabcc..2b644b4b1415b 100644
--- 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
index a334f0ccd4b04..f9a91450c2e40 100644
--- 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
index ae871bbf5b7ab..452e967387e99 100644
--- 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;