From 43ccb1da91479b7b26b28a75fcc09894701b7459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 30 Nov 2023 11:16:33 +0100
Subject: [PATCH] more clean up of header-sections

---
 .../backoffice-header-sections.element.ts     | 58 ++++++-------------
 1 file changed, 18 insertions(+), 40 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts
index 2e2f232086..04dc698593 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts
@@ -1,15 +1,12 @@
 import { UMB_BACKOFFICE_CONTEXT_TOKEN } from '../backoffice.context.js';
 import type { UmbBackofficeContext } from '../backoffice.context.js';
-import { css, CSSResultGroup, html, when, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, CSSResultGroup, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 @customElement('umb-backoffice-header-sections')
 export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
-	@state()
-	private _open = false;
-
 	@state()
 	private _sections: Array<UmbExtensionManifestInitializer<ManifestSection>> = [];
 
@@ -28,37 +25,33 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		});
 	}
 
-	private _handleMore(e: MouseEvent) {
-		e.stopPropagation();
-		this._open = !this._open;
-	}
-
-	private _handleLabelClick() {
-		const moreTab = this.shadowRoot?.getElementById('moreTab');
-		moreTab?.setAttribute('active', 'true');
-
-		this._open = false;
-	}
-
 	private _observeSections() {
 		if (!this._backofficeContext) return;
 
-		this.observe(this._backofficeContext.allowedSections, (allowedSections) => {
-			const oldValue = this._sections;
-			this._sections = allowedSections;
-			this.requestUpdate('_sections', oldValue);
-		});
+		this.observe(
+			this._backofficeContext.allowedSections,
+			(allowedSections) => {
+				const oldValue = this._sections;
+				this._sections = allowedSections;
+				this.requestUpdate('_sections', oldValue);
+			},
+			'observeSections',
+		);
 	}
 
 	private _observeCurrentSection() {
 		if (!this._backofficeContext) return;
 
-		this.observe(this._backofficeContext.activeSectionAlias, (currentSectionAlias) => {
-			this._currentSectionAlias = currentSectionAlias || '';
-		});
+		this.observe(
+			this._backofficeContext.activeSectionAlias,
+			(currentSectionAlias) => {
+				this._currentSectionAlias = currentSectionAlias || '';
+			},
+			'observeCurrentSection',
+		);
 	}
 
-	private _renderSections() {
+	render() {
 		return html`
 			<uui-tab-group id="tabs">
 				${repeat(
@@ -75,10 +68,6 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		`;
 	}
 
-	render() {
-		return html` ${this._renderSections()} `;
-	}
-
 	static styles: CSSResultGroup = [
 		css`
 			#tabs {
@@ -90,17 +79,6 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 				--uui-tab-text-active: var(--uui-color-header-contrast-emphasis);
 				--uui-tab-background: var(--uui-color-header-background);
 			}
-
-			#dropdown {
-				background-color: white;
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				min-width: 200px;
-				color: black; /* Change to variable */
-			}
 		`,
 	];
 }