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 } ) {
)
}
- drawer={
-
- }
+ drawer={ }
header={
{
return {
@@ -64,8 +62,8 @@ export default function List( { templateType } ) {
header={ }
drawer={
}
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 (
<>