Navigation Screen: Update sidebar (#31821)

* Move Sidebar into a separate directory.
* Moves settings from InspectorControl into the Sidebar.
* Fixes selector for e2e tests.
* Wrap "no menu locations" message in the panel body.
* Use two sidebar "system."
* Incorporate tabs in the sidebar.

packages/e2e-tests/specs/experiments/navigation-editor.test.js

@@ -381,10 +381,11 @@ describe( 'Navigation editor', () => {
 			await pressKeyWithModifier( 'primary', 'A' );
 		}
 	} );
+
 	describe( 'Menu name editor', () => {
 		const initialMenuName = 'Main Menu';
 		const navigationNameEditorSelector =
-			'.block-editor-block-inspector .edit-navigation-name-editor__text-control';
+			'.edit-navigation-name-editor__text-control';
 		const inputSelector = `${ navigationNameEditorSelector } input`;
 		let navigatorNameEditor, input;
 		beforeEach( async () => {
@@ -406,12 +407,6 @@ describe( 'Navigation editor', () => {
 			] );
 
 			await visitNavigationEditor();
-			const navBlock = await page.waitForSelector(
-				'div[aria-label="Block: Navigation"]'
-			);
-			const boundingBox = await navBlock.boundingBox();
-			// click on the navigation editor placeholder.
-			await page.mouse.click( boundingBox.x + 25, boundingBox.y + 25 );
 
 			navigatorNameEditor = await page.$( navigationNameEditorSelector );
 			input = await page.$( inputSelector );
@@ -445,6 +440,7 @@ describe( 'Navigation editor', () => {
 			] );
 
 			await input.focus();
+
 			// clear input
 			const oldName = await page.$eval(
 				inputSelector,
@@ -460,17 +456,16 @@ describe( 'Navigation editor', () => {
 			);
 			await saveButton.click();
 			await page.waitForSelector( '.components-snackbar' );
-			const menuNameButton = await page.waitForXPath(
-				'//button[contains(@aria-label, "Edit menu name: ' +
-					newName +
-					'" ) ]'
+			const headerSubtitle = await page.waitForSelector(
+				'.edit-navigation-header__subtitle'
 			);
-			expect( menuNameButton ).toBeTruthy();
-			const menuNameButtonText = await menuNameButton.evaluate(
+			expect( headerSubtitle ).toBeTruthy();
+			const headerSubtitleText = await headerSubtitle.evaluate(
 				( element ) => element.innerText
 			);
-			expect( menuNameButtonText ).toBe( newName );
+			expect( headerSubtitleText ).toBe( `Editing: ${ newName }` );
 		} );
+
 		it( 'does not save a menu name upon clicking save button when name is empty', async () => {
 			const menuPostResponse = {
 				id: 4,
@@ -501,13 +496,14 @@ describe( 'Navigation editor', () => {
 			);
 			await saveButton.click();
 			await page.waitForSelector( '.components-snackbar' );
-			const menuNameButton = await page.waitForXPath(
-				'//button[contains(@aria-label, "Edit menu name" ) ]'
+			const headerSubtitle = await page.waitForSelector(
+				'.edit-navigation-header__subtitle'
 			);
-			const menuNameButtonText = await menuNameButton.evaluate(
+			expect( headerSubtitle ).toBeTruthy();
+			const headerSubtitleText = await headerSubtitle.evaluate(
 				( element ) => element.innerText
 			);
-			expect( menuNameButtonText ).toBe( oldName );
+			expect( headerSubtitleText ).toBe( `Editing: ${ oldName }` );
 		} );
 	} );
 
@@ -531,12 +527,6 @@ describe( 'Navigation editor', () => {
 			] );
 
 			await visitNavigationEditor();
-
-			// Select the navigation block, so inspector controls are visible.
-			const navigationBlock = await page.waitForSelector(
-				'div[aria-label="Block: Navigation"]'
-			);
-			await navigationBlock.click();
 		} );
 
 		afterEach( async () => {

packages/edit-navigation/src/components/layout/index.js

@@ -35,11 +35,10 @@ import {
 } from '../../hooks';
 import ErrorBoundary from '../error-boundary';
 import NavigationEditorShortcuts from './shortcuts';
-import Sidebar from './sidebar';
+import Sidebar from '../sidebar';
 import Header from '../header';
 import Notices from '../notices';
 import Editor from '../editor';
-import InspectorAdditions from '../inspector-additions';
 import UnsavedChangesWarning from './unsaved-changes-warning';
 import { store as editNavigationStore } from '../../store';
 
@@ -175,24 +174,6 @@ export default function Layout( { blockEditorSettings } ) {
 													}
 													blocks={ blocks }
 												/>
-												<InspectorAdditions
-													isManageLocationsModalOpen={
-														isManageLocationsModalOpen
-													}
-													openManageLocationsModal={
-														openManageLocationsModal
-													}
-													closeManageLocationsModal={
-														closeManageLocationsModal
-													}
-													onSelectMenu={ selectMenu }
-													menus={ menus }
-													menuId={ selectedMenuId }
-													onDeleteMenu={ deleteMenu }
-													isMenuBeingDeleted={
-														isMenuBeingDeleted
-													}
-												/>
 											</div>
 										</BlockTools>
 									) }
@@ -205,7 +186,23 @@ export default function Layout( { blockEditorSettings } ) {
 								)
 							}
 						/>
-						<Sidebar hasPermanentSidebar={ hasPermanentSidebar } />
+						<Sidebar
+							onSelectMenu={ selectMenu }
+							menus={ menus }
+							menuId={ selectedMenuId }
+							onDeleteMenu={ deleteMenu }
+							isMenuBeingDeleted={ isMenuBeingDeleted }
+							hasPermanentSidebar={ hasPermanentSidebar }
+							isManageLocationsModalOpen={
+								isManageLocationsModalOpen
+							}
+							openManageLocationsModal={
+								openManageLocationsModal
+							}
+							closeManageLocationsModal={
+								closeManageLocationsModal
+							}
+						/>
 					</IsMenuNameControlFocusedContext.Provider>
 					<UnsavedChangesWarning />
 				</BlockEditorProvider>

packages/edit-navigation/src/components/layout/style.scss

@@ -59,7 +59,7 @@
 		left: auto;
 
 		// Hide the toggle as the sidebar should be permanently open.
-		.interface-complementary-area-header {
+		.edit-navigation-sidebar__panel-tabs > button {
 			display: none;
 		}
 	}

packages/edit-navigation/src/components/name-display/index.js

@@ -17,10 +17,7 @@ import {
 	useMenuEntityProp,
 	IsMenuNameControlFocusedContext,
 } from '../../hooks';
-import {
-	COMPLEMENTARY_AREA_SCOPE,
-	COMPLEMENTARY_AREA_ID,
-} from '../../constants';
+import { SIDEBAR_SCOPE, SIDEBAR_MENU } from '../../constants';
 
 export default function NameDisplay() {
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
@@ -42,10 +39,7 @@ export default function NameDisplay() {
 						menuName
 					) }
 					onClick={ () => {
-						enableComplementaryArea(
-							COMPLEMENTARY_AREA_SCOPE,
-							COMPLEMENTARY_AREA_ID
-						);
+						enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_MENU );
 						setIsMenuNameEditFocused( true );
 					} }
 				>