Update navigation sidebar responsiveness (#36638)

* Close and open the nav sidebar in the list page * Remove superflouous prop * Tidy up effect
WordPress · Nov 23, 2021 · 69db0e3 · 69db0e3
1 parent 200ab5a
commit 69db0e3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -219,11 +219,7 @@ function Editor( { initialSettings, onError } ) {
 														<ComplementaryArea.Slot scope="core/edit-site" />
 													)
 												}
-												drawer={
-													<NavigationSidebar
-														defaultIsOpen={ false }
-													/>
-												}
+												drawer={ <NavigationSidebar /> }
 												header={
 													<Header
 														openEntitiesSavedStates={

diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js
@@ -5,7 +5,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { InterfaceSkeleton } from '@wordpress/interface';
 import { __, sprintf } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
@@ -18,7 +17,6 @@ import Table from './table';
 
 export default function List( { templateType } ) {
 	useRegisterShortcuts();
-	const isDesktopViewport = useViewportMatch( 'medium' );
 
 	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
 		return {
@@ -64,8 +62,8 @@ export default function List( { templateType } ) {
 			header={ <Header templateType={ templateType } /> }
 			drawer={
 				<NavigationSidebar
-					defaultIsOpen={ isDesktopViewport }
 					activeTemplateType={ templateType }
+					isDefaultOpen
 				/>
 			}
 			content={

diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { createSlotFill } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,10 +17,25 @@ export const {
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
 export default function NavigationSidebar( {
-	defaultIsOpen = false,
+	isDefaultOpen = false,
 	activeTemplateType,
 } ) {
-	const [ isNavigationOpen, setIsNavigationOpen ] = useState( defaultIsOpen );
+	const isDesktopViewport = useViewportMatch( 'medium' );
+	const [ isNavigationOpen, setIsNavigationOpen ] = useState(
+		isDefaultOpen && isDesktopViewport
+	);
+
+	useEffect( () => {
+		// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
+		if ( isDefaultOpen && isDesktopViewport ) {
+			setIsNavigationOpen( true );
+		}
+
+		// When transitioning to mobile/tablet, close the navigation.
+		if ( ! isDesktopViewport ) {
+			setIsNavigationOpen( false );
+		}
+	}, [ isDefaultOpen, isDesktopViewport ] );
 
 	return (
 		<>