Nav redesign: don't collapse global sidebar when navigating to My Home (

#90986)

client/layout/global-sidebar/menu-items/menu-item.tsx

@@ -49,8 +49,7 @@ const SidebarMenuItem = forwardRef< HTMLButtonElement | HTMLAnchorElement, Props
 			return getShouldShowGlobalSiteSidebar(
 				state,
 				selectedSiteId,
-				currentSection !== false ? currentSection?.group ?? '' : '',
-				currentSection !== false ? currentSection?.name ?? '' : ''
+				currentSection !== false ? currentSection?.group ?? '' : ''
 			);
 		} );
 

client/layout/index.jsx

@@ -490,23 +490,16 @@ export default withCurrentRoute(
 		const isWooCoreProfilerFlow =
 			[ 'jetpack-connect', 'login' ].includes( sectionName ) &&
 			isWooCommerceCoreProfilerFlow( state );
-		const shouldShowGlobalSidebar = getShouldShowGlobalSidebar(
-			state,
-			siteId,
-			sectionGroup,
-			sectionName
-		);
+		const shouldShowGlobalSidebar = getShouldShowGlobalSidebar( state, siteId, sectionGroup );
 		const shouldShowCollapsedGlobalSidebar = getShouldShowCollapsedGlobalSidebar(
 			state,
 			siteId,
-			sectionGroup,
-			sectionName
+			sectionGroup
 		);
 		const shouldShowUnifiedSiteSidebar = getShouldShowUnifiedSiteSidebar(
 			state,
 			siteId,
-			sectionGroup,
-			sectionName
+			sectionGroup
 		);
 		const noMasterbarForRoute =
 			isJetpackLogin ||

client/layout/masterbar/logged-in.jsx

@@ -779,7 +779,6 @@ class MasterbarLoggedIn extends Component {
 export default connect(
 	( state ) => {
 		const sectionGroup = getSectionGroup( state );
-		const sectionName = getSectionName( state );
 
 		// Falls back to using the user's primary site if no site has been selected
 		// by the user yet
@@ -794,20 +793,17 @@ export default connect(
 		const shouldShowGlobalSidebar = getShouldShowGlobalSidebar(
 			state,
 			currentSelectedSiteId,
-			sectionGroup,
-			sectionName
+			sectionGroup
 		);
 		const shouldShowGlobalSiteSidebar = getShouldShowGlobalSiteSidebar(
 			state,
 			currentSelectedSiteId,
-			sectionGroup,
-			sectionName
+			sectionGroup
 		);
 		const shouldShowUnifiedSiteSidebar = getShouldShowUnifiedSiteSidebar(
 			state,
 			currentSelectedSiteId,
-			sectionGroup,
-			sectionName
+			sectionGroup
 		);
 		const isDesktop = isWithinBreakpoint( '>782px' );
 		return {

client/me/sidebar/index.jsx

@@ -230,14 +230,8 @@ export default withCurrentRoute(
 	connect(
 		( state, { currentSection } ) => {
 			const sectionGroup = currentSection?.group ?? null;
-			const sectionName = currentSection?.name ?? null;
 			const siteId = getSelectedSiteId( state );
-			const shouldShowGlobalSidebar = getShouldShowGlobalSidebar(
-				state,
-				siteId,
-				sectionGroup,
-				sectionName
-			);
+			const shouldShowGlobalSidebar = getShouldShowGlobalSidebar( state, siteId, sectionGroup );
 			return {
 				currentUser: getCurrentUser( state ),
 				shouldShowGlobalSidebar,

client/my-sites/navigation/index.jsx

@@ -109,26 +109,18 @@ export default withCurrentRoute(
 	connect(
 		( state, { currentSection } ) => {
 			const sectionGroup = currentSection?.group ?? null;
-			const sectionName = currentSection?.name ?? null;
 			const siteId = getSelectedSiteId( state );
 			const siteDomain = getSiteDomain( state, siteId );
-			const shouldShowGlobalSidebar = getShouldShowGlobalSidebar(
-				state,
-				siteId,
-				sectionGroup,
-				sectionName
-			);
+			const shouldShowGlobalSidebar = getShouldShowGlobalSidebar( state, siteId, sectionGroup );
 			const shouldShowCollapsedGlobalSidebar = getShouldShowCollapsedGlobalSidebar(
 				state,
 				siteId,
-				sectionGroup,
-				sectionName
+				sectionGroup
 			);
 			const shouldShowUnifiedSiteSidebar = getShouldShowUnifiedSiteSidebar(
 				state,
 				siteId,
-				sectionGroup,
-				sectionName
+				sectionGroup
 			);
 			return {
 				siteDomain,

client/my-sites/plugins/controller.js

@@ -234,8 +234,7 @@ export function scheduledUpdatesMultisite( context, next ) {
 	const isSidebarCollapsed = getShouldShowCollapsedGlobalSidebar(
 		state,
 		undefined,
-		context.section.group,
-		context.section.name
+		context.section.group
 	);
 
 	context.secondary = <PluginsSidebar path={ context.path } isCollapsed={ isSidebarCollapsed } />;

client/my-sites/sidebar/use-site-menu-items.js

@@ -37,12 +37,7 @@ const useSiteMenuItems = () => {
 	const isAllDomainsView = '/domains/manage' === currentRoute;
 	const { currentSection } = useCurrentRoute();
 	const shouldShowGlobalSidebar = useSelector( ( state ) => {
-		return getShouldShowGlobalSidebar(
-			state,
-			selectedSiteId,
-			currentSection?.group,
-			currentSection?.name
-		);
+		return getShouldShowGlobalSidebar( state, selectedSiteId, currentSection?.group );
 	} );
 	useEffect( () => {
 		if ( selectedSiteId && siteDomain ) {

client/reader/notifications/controller.jsx

@@ -11,12 +11,7 @@ export function notifications( context, next ) {
 	const basePath = sectionify( context.path );
 	const mcKey = 'notifications';
 	const state = context.store.getState();
-	const shouldShowGlobalSidebar = getShouldShowGlobalSidebar(
-		state,
-		null,
-		'reader',
-		'notifications'
-	);
+	const shouldShowGlobalSidebar = getShouldShowGlobalSidebar( state, null, 'reader' );
 
 	trackPageLoad( basePath, 'Reader > Notifications', mcKey );
 	recordTrack(

client/reader/sidebar/index.jsx

@@ -334,14 +334,8 @@ export default withCurrentRoute(
 	connect(
 		( state, { currentSection } ) => {
 			const sectionGroup = currentSection?.group ?? null;
-			const sectionName = currentSection?.name ?? null;
 			const siteId = getSelectedSiteId( state );
-			const shouldShowGlobalSidebar = getShouldShowGlobalSidebar(
-				state,
-				siteId,
-				sectionGroup,
-				sectionName
-			);
+			const shouldShowGlobalSidebar = getShouldShowGlobalSidebar( state, siteId, sectionGroup );
 			return {
 				isListsOpen: isListsOpen( state ),
 				isTagsOpen: isTagsOpen( state ),

client/state/global-sidebar/selectors.ts

@@ -4,39 +4,41 @@ import isScheduledUpdatesMultisiteRoute from 'calypso/state/selectors/is-schedul
 import { isGlobalSiteViewEnabled } from '../sites/selectors';
 import type { AppState } from 'calypso/types';
 
-// Calypso pages for which we show the Global Site View.
-// Calypso pages not listed here will be shown in nav unification instead.
+// Calypso routes for which we show the Global Site Dashboard.
+// Calypso routes not listed here will be shown in nav unification instead.
 // See: pfsHM7-Dn-p2.
-const GLOBAL_SITE_VIEW_SECTION_NAMES: string[] = [
-	'hosting',
-	'hosting-overview',
-	'github-deployments',
-	'site-monitoring',
-	'dev-tools-promo',
+const GLOBAL_SITE_DASHBOARD_ROUTES: string[] = [
+	'/overview/',
+	'/hosting-config/',
+	'/github-deployments/',
+	'/site-monitoring/',
+	'/dev-tools-promo/',
 ];
 
-function shouldShowGlobalSiteViewSection( siteId: number | null, sectionName: string ) {
+function isInRoute( state: AppState, routes: string[] ) {
+	return routes.some( ( route ) => state.route.path?.current?.startsWith( route ) );
+}
+
+function shouldShowGlobalSiteDashboard( state: AppState, siteId: number | null ) {
 	return (
 		isEnabled( 'layout/dotcom-nav-redesign-v2' ) &&
 		!! siteId &&
-		GLOBAL_SITE_VIEW_SECTION_NAMES.includes( sectionName )
+		isInRoute( state, GLOBAL_SITE_DASHBOARD_ROUTES )
 	);
 }
 
 export const getShouldShowGlobalSiteSidebar = (
 	state: AppState,
 	siteId: number | null,
-	sectionGroup: string,
-	sectionName: string
+	sectionGroup: string
 ) => {
-	return sectionGroup === 'sites' && shouldShowGlobalSiteViewSection( siteId, sectionName );
+	return sectionGroup === 'sites' && shouldShowGlobalSiteDashboard( state, siteId );
 };
 
 export const getShouldShowGlobalSidebar = (
 	state: AppState,
 	siteId: number,
-	sectionGroup: string,
-	sectionName: string
+	sectionGroup: string
 ) => {
 	const pluginsScheduledUpdates = isScheduledUpdatesMultisiteRoute( state );
 
@@ -45,48 +47,56 @@ export const getShouldShowGlobalSidebar = (
 		sectionGroup === 'reader' ||
 		sectionGroup === 'sites-dashboard' ||
 		( sectionGroup === 'sites' && ! siteId ) ||
-		( sectionGroup === 'sites' && sectionName === 'plugins' && pluginsScheduledUpdates ) ||
-		getShouldShowGlobalSiteSidebar( state, siteId, sectionGroup, sectionName )
+		( sectionGroup === 'sites' && pluginsScheduledUpdates ) ||
+		getShouldShowGlobalSiteSidebar( state, siteId, sectionGroup )
 	);
 };
 
 export const getShouldShowCollapsedGlobalSidebar = (
 	state: AppState,
 	siteId: number,
-	sectionGroup: string,
-	sectionName: string
+	sectionGroup: string
 ) => {
-	const isAllowedRegion =
-		sectionGroup === 'sites-dashboard' || sectionGroup === 'sites' || sectionName === 'plugins';
-	const siteSelected = sectionGroup === 'sites-dashboard' && !! siteId;
-	const siteLoaded = getShouldShowGlobalSiteSidebar( state, siteId, sectionGroup, sectionName );
-	const pluginsScheduledUpdatesEditMode =
-		state.route.path?.current?.includes( 'scheduled-updates/edit' ) ||
-		state.route.path?.current?.includes( 'scheduled-updates/create' );
-	const isBulkDomainsDashboard = state.route.path?.current === '/domains/manage';
+	if ( ! isEnabled( 'layout/dotcom-nav-redesign-v2' ) ) {
+		return false;
+	}
+
+	const isSitesDashboard = sectionGroup === 'sites-dashboard';
+	const isSiteDashboard = getShouldShowGlobalSiteSidebar( state, siteId, sectionGroup );
+
+	// A site is just clicked and the global sidebar is in collapsing animation.
+	const isSiteJustSelectedFromSitesDashboard =
+		isSitesDashboard &&
+		!! siteId &&
+		isInRoute( state, [
+			'/sites', // started collapsing when still in sites dashboard
+			...GLOBAL_SITE_DASHBOARD_ROUTES, // has just stopped collapsing when in one of the paths in site dashboard
+		] );
+
+	const isPluginsScheduledUpdatesEditMode =
+		! siteId &&
+		isInRoute( state, [ '/plugins/scheduled-updates/edit', '/plugins/scheduled-updates/create' ] );
+
+	const isBulkDomainsDashboard = isInRoute( state, [ '/domains/manage' ] );
 	const isSmallScreenDashboard =
-		( sectionGroup === 'sites-dashboard' || isBulkDomainsDashboard ) &&
-		isWithinBreakpoint( '<782px' );
+		( isSitesDashboard || isBulkDomainsDashboard ) && isWithinBreakpoint( '<782px' );
 
 	return (
-		isEnabled( 'layout/dotcom-nav-redesign-v2' ) &&
-		isAllowedRegion &&
-		( siteSelected ||
-			siteLoaded ||
-			( ! siteId && pluginsScheduledUpdatesEditMode ) ||
-			isSmallScreenDashboard )
+		isSiteJustSelectedFromSitesDashboard ||
+		isSiteDashboard ||
+		isPluginsScheduledUpdatesEditMode ||
+		isSmallScreenDashboard
 	);
 };
 
 export const getShouldShowUnifiedSiteSidebar = (
 	state: AppState,
 	siteId: number,
-	sectionGroup: string,
-	sectionName: string
+	sectionGroup: string
 ) => {
 	return (
 		isGlobalSiteViewEnabled( state, siteId ) &&
 		sectionGroup === 'sites' &&
-		! shouldShowGlobalSiteViewSection( siteId, sectionName )
+		! shouldShowGlobalSiteDashboard( state, siteId )
 	);
 };