From 0ae4443906e2ae1d4bd3c918737863dc3d8adcff Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 10 Sep 2024 14:36:00 +0200
Subject: [PATCH] move target logic to link element

---
 .../menu-item-layout.element.ts               | 19 ++++++++++---------
 .../menu-item/link/link-menu-item.element.ts  | 11 +++++++++++
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item-layout/menu-item-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item-layout/menu-item-layout.element.ts
index af64f06949..b6471e064d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item-layout/menu-item-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item-layout/menu-item-layout.element.ts
@@ -37,6 +37,15 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
 	@property({ type: String })
 	public href?: string;
 
+	/**
+	 * Set an anchor tag target, only used when using href.
+	 * @type {string}
+	 * @attr
+	 * @default undefined
+	 */
+	@property({ type: String })
+	public target?: '_blank' | '_parent' | '_self' | '_top';
+
 	@state()
 	private _isActive = false;
 
@@ -47,14 +56,6 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
 
 	#debouncedCheckIsActive = debounce(() => this.#checkIsActive(), 100);
 
-	#getTarget() {
-		if (this.href && this.href.startsWith('http')) {
-			return '_blank';
-		}
-
-		return '_self';
-	}
-
 	#checkIsActive() {
 		if (!this.href) {
 			this._isActive = false;
@@ -72,7 +73,7 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
 			.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this.label}
 			?active=${this._isActive}
 			?has-children=${this.hasChildren}
-			target=${this.#getTarget()}>
+			target=${ifDefined(this.href && this.target ? this.target : undefined)}>
 			<umb-icon slot="icon" name=${this.iconName}></umb-icon>
 			${this.entityType
 				? html`<umb-entity-actions-bundle
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts
index e37299531a..e1e512b0fd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/link/link-menu-item.element.ts
@@ -8,10 +8,21 @@ export class UmbLinkMenuItemElement extends UmbLitElement implements UmbMenuItem
 	@property({ type: Object, attribute: false })
 	manifest?: ManifestMenuItemLinkKind;
 
+	#getTarget() {
+		const href = this.manifest?.meta.href;
+
+		if (href && href.startsWith('http')) {
+			return '_blank';
+		}
+
+		return '_self';
+	}
+
 	override render() {
 		return html`
 			<umb-menu-item-layout
 				.href=${this.manifest?.meta.href}
+				target=${this.#getTarget()}
 				.iconName=${this.manifest?.meta.icon ?? ''}
 				.label=${this.localize.string(this.manifest?.meta.label ?? this.manifest?.name ?? '')}>
 			</umb-menu-item-layout>