Clear the editor canvas container view when accessing the main naviga…

…tion screen

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -7,15 +7,18 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
 
 export default function SidebarNavigationScreenMain() {
 	const hasNavigationMenus = useSelect( ( select ) => {
@@ -36,6 +39,22 @@ export default function SidebarNavigationScreenMain() {
 	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
 		? hasNavigationMenus
 		: false;
+
+	const editorCanvasContainerView = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getEditorCanvasContainerView();
+	}, [] );
+
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
+	// Clear the editor canvas container view when accessing the main navigation screen.
+	useEffect( () => {
+		if ( editorCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
+		}
+	}, [ editorCanvasContainerView, setEditorCanvasContainerView ] );
+
 	return (
 		<SidebarNavigationScreen
 			isRoot