diff --git a/modules/banner/README.md b/modules/banner/README.md index bd18b28b25..21955c4e63 100644 --- a/modules/banner/README.md +++ b/modules/banner/README.md @@ -5,11 +5,12 @@ Allows rendering a top bar with slide out left panel menu. Supports the following configuration options: -| Key | Type | Description | -| ------------- | ------ | ------------------------------------------------------------ | -| logo_url | string | URL to the logo to render in the banner | -| logo_link_url | string | URL to send the user to when clicking the logo in the banner | -| menu | `Menu` | Data to render in the banner menu | +| Key | Type | Description | +| ------------- | ------ | ---------------------------------------------------------------------------------------------- | +| logo_url | string | URL to the logo to render in the banner | +| logo_link_url | string | URL to send the user to when clicking the logo in the banner | +| title | string | The title to render next to the logo, falls back to top level `brand` variable if unspecified. | +| menu | `Menu` | Data to render in the banner menu | The `Menu` type is fulfilled by the following discriminated union: diff --git a/modules/banner/element-web/src/Banner.tsx b/modules/banner/element-web/src/Banner.tsx index 92087743b6..112470d4e8 100644 --- a/modules/banner/element-web/src/Banner.tsx +++ b/modules/banner/element-web/src/Banner.tsx @@ -37,9 +37,10 @@ interface Props { logoUrl: string; href: string; menu: ModuleConfig["menu"]; + title: string; } -const Banner: FC = ({ api, logoUrl, href, menu }) => { +const Banner: FC = ({ api, logoUrl, href, menu, title }) => { let menuJsx; switch (menu.type) { case "static": { @@ -59,7 +60,7 @@ const Banner: FC = ({ api, logoUrl, href, menu }) => { - {api.config.get("brand")} + {title} ); diff --git a/modules/banner/element-web/src/config.ts b/modules/banner/element-web/src/config.ts index 3a01e3e8ef..678ed0360a 100644 --- a/modules/banner/element-web/src/config.ts +++ b/modules/banner/element-web/src/config.ts @@ -89,6 +89,13 @@ export const ModuleConfig = z.object({ */ logo_link_url: z.url(), + /** + * The title to show to the right of the Logo + * + * Will fall back to `brand` variable if undefined, can be hidden by setting to the empty string. + */ + title: z.optional(z.string()), + /** * Configuration for the menu. */ diff --git a/modules/banner/element-web/src/index.tsx b/modules/banner/element-web/src/index.tsx index 538fb8b3af..66859118a1 100644 --- a/modules/banner/element-web/src/index.tsx +++ b/modules/banner/element-web/src/index.tsx @@ -47,6 +47,7 @@ class BannerModule implements Module { logoUrl={this.config.logo_url} href={this.config.logo_link_url} menu={this.config.menu} + title={this.config.title ?? this.api.config.get("brand")} /> , );