Avoid multiple selected menu items

client/my-sites/sidebar-unified/index.jsx

@@ -27,7 +27,7 @@ import SidebarSeparator from 'layout/sidebar/separator';
 import 'layout/sidebar-unified/style.scss';
 import 'state/admin-menu/init';
 import Spinner from 'components/spinner';
-
+import { itemLinkMatches } from '../sidebar/utils';
 import './style.scss';
 
 export const MySitesSidebarUnified = ( { path } ) => {
@@ -49,6 +49,8 @@ export const MySitesSidebarUnified = ( { path } ) => {
 		<Sidebar>
 			<CurrentSite forceAllSitesView={ isAllDomainsView } />
 			{ menuItems.map( ( item, i ) => {
+				const isSelected = item?.url && itemLinkMatches( item.url, path );
+
 				if ( 'separator' === item?.type ) {
 					return <SidebarSeparator key={ i } />;
 				}
@@ -59,12 +61,20 @@ export const MySitesSidebarUnified = ( { path } ) => {
 							key={ item.slug }
 							path={ path }
 							link={ item.url }
+							selected={ isSelected }
 							{ ...item }
 						/>
 					);
 				}
 
-				return <MySitesSidebarUnifiedItem key={ item.slug } path={ path } { ...item } />;
+				return (
+					<MySitesSidebarUnifiedItem
+						key={ item.slug }
+						path={ path }
+						selected={ isSelected }
+						{ ...item }
+					/>
+				);
 			} ) }
 		</Sidebar>
 	);

client/my-sites/sidebar-unified/item.jsx

@@ -15,19 +15,23 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { itemLinkMatches } from '../sidebar/utils';
+
 import { getSelectedSiteId } from 'state/ui/selectors';
 import SidebarItem from 'layout/sidebar/item';
 import SidebarCustomIcon from 'layout/sidebar/custom-icon';
 import StatsSparkline from 'blocks/stats-sparkline';
 
 const onNav = () => null;
 
-// selected={ itemLinkMatches( [ '/domains', '/email' ], path ) }
-
-export const MySitesSidebarUnifiedItem = ( { title, icon, url, path, slug } ) => {
+export const MySitesSidebarUnifiedItem = ( {
+	title,
+	icon,
+	url,
+	slug,
+	selected = false,
+	isSubItem = false,
+} ) => {
 	const selectedSiteId = useSelector( getSelectedSiteId );
-	const selected = itemLinkMatches( url, path );
 
 	let children = null;
 
@@ -45,6 +49,7 @@ export const MySitesSidebarUnifiedItem = ( { title, icon, url, path, slug } ) =>
 			selected={ selected }
 			customIcon={ <SidebarCustomIcon icon={ icon } /> }
 			forceInternalLink
+			className={ isSubItem ? 'sidebar__menu-item--child' : 'sidebar__menu-item-parent' }
 		>
 			{ children }
 		</SidebarItem>

client/my-sites/sidebar-unified/menu.jsx

@@ -8,7 +8,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import page from 'page';
@@ -17,16 +17,43 @@ import page from 'page';
  * Internal dependencies
  */
 import { isSidebarSectionOpen } from 'state/my-sites/sidebar/selectors';
-import { toggleMySitesSidebarSection as toggleSection } from 'state/my-sites/sidebar/actions';
+import {
+	toggleMySitesSidebarSection as toggleSection,
+	expandMySitesSidebarSection as expandSection,
+} from 'state/my-sites/sidebar/actions';
 import ExpandableSidebarMenu from 'layout/sidebar/expandable';
 import MySitesSidebarUnifiedItem from './item';
 import SidebarCustomIcon from 'layout/sidebar/custom-icon';
 import { isExternal } from 'lib/url';
+import { itemLinkMatches } from '../sidebar/utils';
 
-export const MySitesSidebarUnifiedMenu = ( { slug, title, icon, children, path, link } ) => {
+export const MySitesSidebarUnifiedMenu = ( {
+	slug,
+	title,
+	icon,
+	children,
+	path,
+	link,
+	selected,
+} ) => {
+	const hasAutoExpanded = useRef( false );
 	const reduxDispatch = useDispatch();
 	const sectionId = 'SIDEBAR_SECTION_' + slug;
 	const isExpanded = useSelector( ( state ) => isSidebarSectionOpen( state, sectionId ) );
+	const selectedMenuItem =
+		children && children.find( ( menuItem ) => itemLinkMatches( menuItem.url, path ) );
+	const childIsSelected = !! selectedMenuItem;
+
+	/**
+	 * One time only, auto-expand the currently active section, or the section
+	 * which contains the current active item.
+	 */
+	useEffect( () => {
+		if ( ! hasAutoExpanded.current && ( selected || childIsSelected ) ) {
+			reduxDispatch( expandSection( sectionId ) );
+			hasAutoExpanded.current = true;
+		}
+	}, [ selected, childIsSelected, reduxDispatch, sectionId ] );
 
 	return (
 		<ExpandableSidebarMenu
@@ -41,13 +68,23 @@ export const MySitesSidebarUnifiedMenu = ( { slug, title, icon, children, path,
 				}
 				reduxDispatch( toggleSection( sectionId ) );
 			} }
-			expanded={ isExpanded }
+			expanded={ isExpanded || selected }
 			title={ title }
 			customIcon={ <SidebarCustomIcon icon={ icon } /> }
+			className={ ( selected || childIsSelected ) && 'sidebar__menu--selected' }
 		>
-			{ children.map( ( item ) => (
-				<MySitesSidebarUnifiedItem key={ item.slug } path={ path } { ...item } />
-			) ) }
+			{ children.map( ( item ) => {
+				const isSelected = selectedMenuItem?.url === item.url;
+				return (
+					<MySitesSidebarUnifiedItem
+						key={ item.slug }
+						path={ path }
+						{ ...item }
+						selected={ isSelected }
+						isSubItem={ true }
+					/>
+				);
+			} ) }
 		</ExpandableSidebarMenu>
 	);
 };

client/my-sites/sidebar-unified/style.scss

@@ -74,25 +74,34 @@ $font-size: rem( 14px );
 			}
 		}
 
-		.sidebar__menu.is-toggle-open .sidebar__heading {
-			background: #0073aa;
-			color: white;
-
-			&::after {
-				right: 0;
-				border: solid 8px transparent;
-				content: ' ';
-				height: 0;
-				width: 0;
-				position: absolute;
-				pointer-events: none;
-				border-right-color: #f1f1f1;
-				top: 50%;
-				margin-top: -8px;
+		.sidebar__menu.is-toggle-open {
+
+			// Open
+			.sidebar__heading {
+				background: #32373c;
+
+				&::after {
+					right: 0;
+					border: solid 8px transparent;
+					content: ' ';
+					height: 0;
+					width: 0;
+					position: absolute;
+					pointer-events: none;
+					border-right-color: #f1f1f1;
+					top: 50%;
+					margin-top: -8px;
+				}
+
+				.sidebar__menu-icon {
+					color: #fff;
+				}
 			}
 
-			.sidebar__menu-icon {
-				color: #fff;
+			// Open and selected
+			&.sidebar__menu--selected .sidebar__heading {
+				background: #0073aa;
+				color: white;
 			}
 		}
 
@@ -116,6 +125,12 @@ $font-size: rem( 14px );
 				}
 			}
 
+			.selected .sidebar__menu-link {
+				background-color: transparent;
+				color: white;
+				font-weight: 600;
+			}
+
 			.sidebar__menu-link-text {
 				padding: 0;
 			}