Render minimal header when menu isn't selected

WordPress · Sep 14, 2021 · 16e81a6 · 16e81a6
1 parent 5c2d4e8
commit 16e81a6
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
@@ -24,6 +24,18 @@ export default function Header( {
 } ) {
 	const isMediumViewport = useViewportMatch( 'medium' );
 
+	if ( ! isMenuSelected ) {
+		return (
+			<div className="edit-navigation-header">
+				<div className="edit-navigation-header__toolbar-wrapper">
+					<h1 className="edit-navigation-header__title">
+						{ __( 'Navigation' ) }
+					</h1>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div className="edit-navigation-header">
 			<div className="edit-navigation-header__toolbar-wrapper">
@@ -47,16 +59,13 @@ export default function Header( {
 				</NavigableToolbar>
 			</div>
 
-			{ isMenuSelected && (
-				<MenuActions menus={ menus } isLoading={ isPending } />
-			) }
-			{ isMenuSelected && (
-				<div className="edit-navigation-header__actions">
-					{ isMediumViewport && <NewButton menus={ menus } /> }
-					<SaveButton navigationPost={ navigationPost } />
-					<PinnedItems.Slot scope="core/edit-navigation" />
-				</div>
-			) }
+			<MenuActions menus={ menus } isLoading={ isPending } />
+
+			<div className="edit-navigation-header__actions">
+				{ isMediumViewport && <NewButton menus={ menus } /> }
+				<SaveButton navigationPost={ navigationPost } />
+				<PinnedItems.Slot scope="core/edit-navigation" />
+			</div>
 		</div>
 	);
 }