Implement close icon for navigation sidebar

WordPress · Apr 19, 2021 · deedd31 · deedd31
1 parent 619b2fe
commit deedd31
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 13 deletions.
diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
@@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data';
  */
 import NavigationPanel from './navigation-panel';
 import NavigationToggle from './navigation-toggle';
-import { store as editSiteStore } from '../../store';
+import { store as editSiteStore } from '../../store/index';
 
 export const {
 	Fill: NavigationPanelPreviewFill,

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -11,6 +11,8 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { ESCAPE } from '@wordpress/keycodes';
+import { close } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -19,6 +21,7 @@ import ContentNavigation from './content-navigation';
 import TemplatesNavigation from './templates-navigation';
 import { MENU_ROOT } from './constants';
 import { store as editSiteStore } from '../../../store';
+import NavigationToggle from '../navigation-toggle';
 
 const NavigationPanel = ( { isOpen } ) => {
 	const [ contentActiveMenu, setContentActiveMenu ] = useState( MENU_ROOT );
@@ -72,6 +75,13 @@ const NavigationPanel = ( { isOpen } ) => {
 			tabIndex="-1"
 			onKeyDown={ closeOnEscape }
 		>
+			<NavigationToggle
+				isOpen={ isOpen }
+				size="24px"
+				icon={ close }
+				className="edit-site-navigation-panel__inner-toggle"
+				label={ __( 'Close navigation' ) }
+			/>
 			<div className="edit-site-navigation-panel__inner">
 				<div className="edit-site-navigation-panel__site-title-container">
 					<div className="edit-site-navigation-panel__site-title">

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -10,9 +15,15 @@ import { store as coreDataStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
+import { store as editSiteStore } from '../../../store/index';
 
-function NavigationToggle( { icon, isOpen } ) {
+function NavigationToggle( {
+	icon,
+	isOpen,
+	size = '36px',
+	className = '',
+	label = __( 'Toggle navigation' ),
+} ) {
 	const {
 		isRequestingSiteIcon,
 		navigationPanelMenu,
@@ -49,9 +60,11 @@ function NavigationToggle( { icon, isOpen } ) {
 		openNavigationPanelToMenu( navigationPanelMenu );
 	};
 
-	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
+	let buttonIcon = <Icon size={ size } icon={ wordpress } />;
 
-	if ( siteIconUrl ) {
+	if ( icon ) {
+		buttonIcon = <Icon size={ size } icon={ icon } />;
+	} else if ( siteIconUrl ) {
 		buttonIcon = (
 			<img
 				alt={ __( 'Site Icon' ) }
@@ -61,19 +74,18 @@ function NavigationToggle( { icon, isOpen } ) {
 		);
 	} else if ( isRequestingSiteIcon ) {
 		buttonIcon = null;
-	} else if ( icon ) {
-		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
+	const classNames = classnames( 'edit-site-navigation-toggle', {
+		'is-open': isOpen,
+		[ className ]: true,
+	} );
+
 	return (
-		<div
-			className={
-				'edit-site-navigation-toggle' + ( isOpen ? ' is-open' : '' )
-			}
-		>
+		<div className={ classNames }>
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
-				label={ __( 'Toggle navigation' ) }
+				label={ label }
 				onClick={ toggleNavigationPanel }
 				showTooltip
 			>

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -12,6 +12,22 @@
 	width: $header-height;
 }
 
+.edit-site-navigation-panel__inner-toggle {
+	opacity: 0;
+	right: 0;
+	background: none;
+
+	&.is-open {
+		opacity: 1;
+		transition: opacity 0.5s ease;
+		@include reduce-motion("transition");
+	}
+
+	.edit-site-navigation-toggle__button {
+		background: none;
+	}
+}
+
 .edit-site-navigation-toggle__button {
 	align-items: center;
 	background: $gray-900;