diff --git a/client/a8c-for-agencies/components/sidebar/header/index.tsx b/client/a8c-for-agencies/components/sidebar/header/index.tsx index e96c9f59c915..3110b6827577 100644 --- a/client/a8c-for-agencies/components/sidebar/header/index.tsx +++ b/client/a8c-for-agencies/components/sidebar/header/index.tsx @@ -1,4 +1,6 @@ import { SidebarV2Header as SidebarHeader } from 'calypso/layout/sidebar-v2'; +import { useSelector } from 'calypso/state'; +import { getActiveAgency } from 'calypso/state/a8c-for-agencies/agency/selectors'; import A4ALogo, { LOGO_COLOR_SECONDARY_ALT } from '../../a4a-logo'; import ProfileDropdown from './profile-dropdown'; @@ -15,9 +17,16 @@ const AllSitesIcon = () => ( ); const Header = ( { withProfileDropdown }: Props ) => { + const agency = useSelector( getActiveAgency ); + return ( + { agency?.name && ( + + { agency.name } + + ) } { withProfileDropdown && } ); diff --git a/client/a8c-for-agencies/components/sidebar/header/style.scss b/client/a8c-for-agencies/components/sidebar/header/style.scss index 4579e75a3738..7ef068ef63d3 100644 --- a/client/a8c-for-agencies/components/sidebar/header/style.scss +++ b/client/a8c-for-agencies/components/sidebar/header/style.scss @@ -10,6 +10,18 @@ $profile-dropdown-menu-height: 250px; display: flex; justify-content: space-between; } + +.a4a-sidebar__agency-name { + flex: 1 1 0; + min-width: 0; + max-width: 140px; + color: var(--color-sidebar-text); + font-size: 0.875rem; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .components-button .help-center__icon { fill: var(--color-sidebar-text); }