From 2198326cbafc5ca673fdf2cc333ae8a5e51467c4 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 23 Nov 2021 11:25:49 +0800
Subject: [PATCH] Update navigation sidebar responsiveness (#36638)

* Close and open the nav sidebar in the list page

* Remove superflouous prop

* Tidy up effect
---
 .../edit-site/src/components/editor/index.js  |  6 +----
 .../edit-site/src/components/list/index.js    |  4 +---
 .../components/navigation-sidebar/index.js    | 22 ++++++++++++++++---
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index b1487e27e4b20..d69820882bf22 100644
--- 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
index 654dfc7fa4987..2e6e8ea8757c3 100644
--- 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
index 4f0d0f7bc63ed..143b933f56c80 100644
--- 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 (
 		<>