Add: Navigation menus to the browse mode sidebar.

WordPress · Dec 16, 2022 · 00c37d3 · 00c37d3 · github-actions · Dec 16, 2022
1 parent f8efb0d
commit 00c37d3
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -1,4 +1,5 @@
-.edit-site-sidebar-navigation-item.components-item {
+.edit-site-sidebar-navigation-item.components-item,
+.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
 	color: $gray-600;
 	border-width: $border-width-tab;
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -8,7 +8,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled } from '@wordpress/icons';
+import { layout, symbolFilled, navigation } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -49,6 +49,14 @@ export default function SidebarNavigationScreenMain() {
 			}
 			content={
 				<ItemGroup>
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/navigation-menus"
+						withChevron
+						icon={ navigation }
+					>
+						{ __( 'Navigation menus' ) }
+					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/templates"

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import NavigationInspector from '../sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector';
+
+export default function SidebarNavigationScreenNavigationMenus() {
+	return (
+		<SidebarNavigationScreen
+			path="/navigation-menus"
+			parentTitle={ __( 'Design' ) }
+			title={ __( 'Navigation menus' ) }
+			content={
+				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
+					<NavigationInspector />
+				</div>
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -0,0 +1,3 @@
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	margin: 0 #{-$button-size} 0 #{-$grid-unit-30};
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -8,7 +8,6 @@
 .edit-site-sidebar-navigation-screen__content {
 	margin: 0 $grid-unit-20 0 $button-size;
 	flex-grow: 1;
-	overflow-y: auto;
 }
 
 .edit-site-sidebar-navigation-screen__title-icon {

diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -10,13 +10,15 @@ import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
 
 function SidebarScreens() {
 	useSyncSidebarPathWithURL();
 
 	return (
 		<>
 			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenNavigationMenus />
 			<SidebarNavigationScreenTemplates postType="wp_template" />
 			<SidebarNavigationScreenTemplates postType="wp_template_part" />
 		</>

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -22,6 +22,7 @@
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";
+@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";