method for open splitview

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts

@@ -106,6 +106,10 @@ export class UmbDocumentWorkspaceContext
 		this.#activeVariantsInfo.next(activeVariants);
 	}
 
+	openSplitView(culture: string | null, segment: string | null) {
+		this.setActiveVariant(1, culture, segment);
+	}
+
 	getVariant(variantId: UmbVariantId) {
 		return this.#draft.getValue()?.variants?.find((x) => variantId.compare(x));
 	}

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts

@@ -14,7 +14,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor
 		UUITextStyles,
 		css`
 			:host {
-				display: block;
+				display: flex;
 				width: 100%;
 				height: 100%;
 			}
@@ -33,6 +33,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor
 		super();
 		this.observe(this._workspaceContext.activeVariantsInfo, (variants) => {
 			this._workspaceSplitViews = variants;
+			console.log('variants', variants);
 		});
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts

@@ -151,7 +151,13 @@ export class UmbVariantSelectorElement extends UmbLitElement {
 	private _switchVariant(variant: DocumentVariantModel) {
 		if (variant.culture === undefined || variant.segment === undefined) return;
 		this._variantContext?.changeVariant(variant.culture, variant.segment);
-		this._variantSelectorIsOpen = false;
+		this._close();
+	}
+
+	private _openSplitView(variant: DocumentVariantModel) {
+		if (variant.culture === undefined || variant.segment === undefined) return;
+		this._workspaceContext?.openSplitView(variant.culture, variant.segment);
+		this._close();
 	}
 
 	render() {
@@ -187,6 +193,8 @@ export class UmbVariantSelectorElement extends UmbLitElement {
 														<uui-button @click=${() => this._switchVariant(variant)}>
 															${variant.name} ${variant.culture} ${variant.segment}
 														</uui-button>
+
+														<uui-button @click=${() => this._openSplitView(variant)}> Split view </uui-button>
 													</li>
 												</ul>`
 										)}