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 57ef1ba2db..3f8762fb65 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 @@ -7,15 +7,9 @@ import { UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extensi @customElement('umb-backoffice-header-sections') export class UmbBackofficeHeaderSectionsElement extends UmbLitElement { - @state() - private _open = false; - @state() private _sections: Array> = []; - @state() - private _extraSections: Array = []; - @state() private _currentSectionAlias = ''; @@ -31,18 +25,6 @@ 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; @@ -72,64 +54,30 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement { ?active="${this._currentSectionAlias === section.alias}" href="${`section/${section.manifest?.meta.pathname}`}" label="${section.manifest?.meta.label ?? section.manifest?.name ?? ''}"> - ` + `, )} - ${this._renderExtraSections()} `; } - private _renderExtraSections() { - return when( - this._extraSections.length > 0, - () => html` - - - - - - - - - - ` - ); - } - render() { return html` ${this._renderSections()} `; } static styles: CSSResultGroup = [ css` + :host { + display: contents; + } #tabs { - color: var(--uui-color-header-contrast); height: 60px; + flex-basis: 100%; font-size: 16px; --uui-tab-text: var(--uui-color-header-contrast); --uui-tab-text-hover: var(--uui-color-header-contrast-emphasis); --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 */ + background-color: var(--uui-color-header-background); + --uui-tab-group-dropdown-background: var(--uui-color-header-surface); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts index f6dc63079c..00da0fd877 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts @@ -1,4 +1,4 @@ -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, @@ -191,6 +191,7 @@ export class UmbBodyLayoutElement extends LitElement { height: 100%; align-items: center; box-sizing: border-box; + min-width: 0; } #navigation-slot, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts index 642e0f5eac..07daf6531a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-main/section-main.element.ts @@ -1,4 +1,4 @@ -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit'; @customElement('umb-section-main') @@ -17,6 +17,7 @@ export class UmbSectionMainElement extends LitElement { :host { flex: 1 1 auto; height: 100%; + min-width: 0; } main {