Fix Drawer Highlighting/Redirection bugs

src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js

@@ -2,52 +2,64 @@ import { Icon, chevronLeft } from '@wordpress/icons';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 import { Button } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
+import classNames from 'classnames';
 
 const NavDesign = () => {
-	const { designSteps } = useSelect((select) => {
+	const { designSteps } = useSelect( ( select ) => {
 		return {
-			designSteps: select(nfdOnboardingStore).getDesignSteps(),
+			designSteps: select( nfdOnboardingStore ).getDesignSteps(),
 		};
-	}, []);
-	const { setDrawerActiveView } = useDispatch(nfdOnboardingStore);
+	}, [] );
+	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
+
+	const location = useLocation();
 
 	return (
 		<div className="is-drawer-fade">
 			<Button
 				className="nfd-onboarding-drawer__panel-back"
 				variant="tertiary"
-				icon={chevronLeft}
-				onClick={() => setDrawerActiveView(VIEW_NAV_PRIMARY)}
+				icon={ chevronLeft }
+				onClick={ () => setDrawerActiveView( VIEW_NAV_PRIMARY ) }
 			>
-				{__('Main Menu', 'wp-module-onboarding')}
+				{ __( 'Main Menu', 'wp-module-onboarding' ) }
 			</Button>
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
-					{designSteps.map((step) => {
+					{ designSteps.map( ( step ) => {
 						return (
 							<li
-								key={step.path}
+								key={ step.path }
 								className="nfd-onboarding-drawer__panel-menu-item"
 							>
 								<NavLink
-									to={step.path}
-									className="nfd-onboarding-drawer__panel-menu-link"
-									state={{ origin: 'drawer-nav' }}
-									onClick={() =>
-										setDrawerActiveView(step.VIEW)
+									to={ step.path }
+									className={ classNames(
+										'nfd-onboarding-drawer__panel-menu-link',
+										{
+											active:
+												location.pathname ===
+													step.path ||
+												location.pathname.includes(
+													step?.designDrawerActiveLinkIncludes
+												),
+										}
+									) }
+									state={ { origin: 'drawer-nav' } }
+									onClick={ () =>
+										setDrawerActiveView( step.VIEW )
 									}
 								>
-									<Icon icon={step.Icon} />
-									<span>{step.title}</span>
+									<Icon icon={ step.Icon } />
+									<span>{ step.title }</span>
 								</NavLink>
 							</li>
 						);
-					})}
+					} ) }
 				</ul>
 			</div>
 		</div>

src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js

@@ -4,9 +4,9 @@ import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import ExitToWordPress from '../../ExitToWordPress';
 
 import { Icon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useSelect, useDispatch } from '@wordpress/data';
+import classNames from 'classnames';
 
 const NavPrimary = () => {
 	const navigate = useNavigate();
@@ -44,8 +44,25 @@ const NavPrimary = () => {
 							<Tooltip key={ step.path } text={ step.heading }>
 								<li className="nfd-onboarding-drawer__panel-menu-item">
 									<NavLink
-										to={ step.path }
-										className="nfd-onboarding-drawer__panel-menu-link"
+										to={
+											location.pathname === step.path ||
+											location.pathname.includes(
+												step?.primaryDrawerActiveLinkIncludes
+											)
+												? location.pathname
+												: step.path
+										}
+										className={ classNames(
+											'nfd-onboarding-drawer__panel-menu-link',
+											{
+												active:
+													location.pathname ===
+														step.path ||
+													location.pathname.includes(
+														step?.primaryDrawerActiveLinkIncludes
+													),
+											}
+										) }
 										state={ { origin: 'drawer-nav' } }
 										onClick={ () =>
 											step?.VIEW &&

src/OnboardingSPA/data/routes/default-flow.js

@@ -400,6 +400,7 @@ export const steps = [
 		Component: StepDesignThemeStylesMenu,
 		Icon: styles,
 		priority: 160,
+		designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/',
 		VIEW: VIEW_NAV_DESIGN,
 		patternId: 'theme-styles',
 		sidebars: {
@@ -429,6 +430,7 @@ export const steps = [
 		Icon: styles,
 		priority: 170,
 		VIEW: VIEW_DESIGN_THEME_STYLES_PREVIEW,
+		designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/',
 		patternId: 'theme-styles',
 		sidebars: {
 			LearnMore: {
@@ -642,6 +644,7 @@ export const initialTopSteps = () => {
 		description: '',
 		Icon: brush,
 		VIEW: VIEW_NAV_DESIGN,
+		primaryDrawerActiveLinkIncludes: '/wp-setup/step/design/',
 		priority: 140 /* matches priority for first design step */,
 	};
 
@@ -651,6 +654,7 @@ export const initialTopSteps = () => {
 		heading: __( 'Get Started', 'wp-module-onboarding' ),
 		Icon: home,
 		VIEW: VIEW_NAV_GET_STARTED,
+		primaryDrawerActiveLinkIncludes: '/wp-setup/step/get-started/',
 		priority: 20,
 	};
 

src/OnboardingSPA/data/routes/ecommerce-flow.js

@@ -131,6 +131,7 @@ export const initialTopSteps = () => {
 		title: __( 'Store Info', 'wp-module-onboarding' ),
 		description: '',
 		Icon: store,
+		primaryDrawerActiveLinkIncludes: '/ecommerce/step/',
 		VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO,
 		priority: 41 /* matches priority for first store info step */,
 	};