chore: sidebar actions pressed state (#29877)

apps/meteor/client/sidebar/header/actions/Directory.tsx

@@ -14,7 +14,14 @@ const Directory = (props: DirectoryProps) => {
 		router.navigate('/directory');
 	});
 
-	return <Sidebar.TopBar.Action {...props} icon='notebook-hashtag' onClick={handleDirectory} />;
+	return (
+		<Sidebar.TopBar.Action
+			{...props}
+			icon='notebook-hashtag'
+			onClick={handleDirectory}
+			pressed={router.getLocationPathname().includes('/directory')}
+		/>
+	);
 };
 
 export default Directory;

apps/meteor/client/sidebar/header/actions/Home.tsx

@@ -13,7 +13,9 @@ const SidebarHeaderActionHome: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (p
 		router.navigate('/home');
 	});
 
-	return showHome ? <Sidebar.TopBar.Action {...props} icon='home' onClick={handleHome} /> : null;
+	return showHome ? (
+		<Sidebar.TopBar.Action {...props} icon='home' onClick={handleHome} pressed={router.getLocationPathname().includes('/home')} />
+	) : null;
 };
 
 export default SidebarHeaderActionHome;

ee/packages/ui-theming/src/sidebarPalette.ts

@@ -53,7 +53,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-secondary-default', token: '', color: '#0D0F11' },
 			{ name: 'button-background-secondary-hover', token: '', color: '#3A404B' },
-			{ name: 'button-background-secondary-press', token: '', color: '#2C313A' },
+			{ name: 'button-background-secondary-press', token: '', color: '#4C5362' },
 			{ name: 'button-background-secondary-focus', token: '', color: '#0D0F11' },
 			{ name: 'button-background-secondary-keyfocus', token: '', color: '#2F343D' },
 			{ name: 'button-background-secondary-disabled', token: '', color: '#2F343D' },

ee/packages/ui-theming/src/sidebarPaletteDark.ts

@@ -55,7 +55,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-secondary-default', token: '', color: '#0D0F11' },
 			{ name: 'button-background-secondary-hover', token: '', color: '#3A404B' },
-			{ name: 'button-background-secondary-press', token: '', color: '#2C313A' },
+			{ name: 'button-background-secondary-press', token: '', color: '#4C5362' },
 			{ name: 'button-background-secondary-focus', token: '', color: '#0D0F11' },
 			{ name: 'button-background-secondary-keyfocus', token: '', color: '#2F343D' },
 			{ name: 'button-background-secondary-disabled', token: '', color: '#2F343D' },