From 7cd26cf5d5ca9c6211693d3b2af6d1d4c6caa862 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 18 Apr 2024 14:16:18 +0200
Subject: [PATCH] set active item

---
 .../collection-view-bundle.element.ts         | 31 +++++++------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
index 0ff700a282..276c742c57 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
@@ -110,11 +110,6 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 
 	#onClick(view: UmbCollectionViewLayout) {
 		this.#collectionContext?.setLastSelectedView(this._entityUnique, view.alias);
-
-		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		this._popover?.hidePopover();
 	}
 
 	render() {
@@ -123,7 +118,7 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 
 		return html`
 			<uui-button compact popovertarget="collection-view-bundle-popover" label="status">
-				${this.#renderItemDisplay(this._currentView)}
+				<umb-icon name=${this._currentView.icon}></umb-icon>
 			</uui-button>
 			<uui-popover-container id="collection-view-bundle-popover" placement="bottom-end">
 				<umb-popover-layout>
@@ -141,31 +136,27 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 
 	#renderItem(view: UmbCollectionViewLayout) {
 		return html`
-			<uui-button compact href="${this._collectionRootPathName}/${view.pathName}" @click=${() => this.#onClick(view)}>
-				${this.#renderItemDisplay(view)}
-				<span class="label">${view.label}</span>
-			</uui-button>
+			<uui-menu-item
+				label=${view.label}
+				href="${this._collectionRootPathName}/${view.pathName}"
+				@click-label=${() => this.#onClick(view)}
+				?active=${view.alias === this._currentView?.alias}>
+				<umb-icon slot="icon" name=${view.icon}></umb-icon>
+			</uui-menu-item>
 		`;
 	}
 
-	#renderItemDisplay(view: UmbCollectionViewLayout) {
-		return html`<umb-icon name=${view.icon}></umb-icon>`;
-	}
-
 	static styles = [
 		UmbTextStyles,
 		css`
 			:host {
 				--uui-button-content-align: left;
 			}
-			.label {
-				margin-left: var(--uui-size-space-1);
-			}
+
 			.filter-dropdown {
-				display: flex;
-				gap: var(--uui-size-space-1);
-				flex-direction: column;
+				padding: var(--uui-size-space-3);
 			}
+
 			umb-icon {
 				display: inline-block;
 			}