diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts
index 03fa9cfd53..54238409df 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts
@@ -3,7 +3,6 @@ export * from './constants.js';
export * from './default/default-section.element.js';
export * from './section-main/index.js';
export * from './section-picker-modal/section-picker-modal.token.js';
-export * from './section-sidebar-context-menu/index.js';
export * from './section-sidebar/index.js';
export * from './section.context.js';
export * from './section.context.token.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/index.ts
deleted file mode 100644
index c1420f9b8a..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './section-sidebar-context-menu.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
deleted file mode 100644
index 065ed5c8b6..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import type { UmbSectionSidebarContext } from '../section-sidebar/index.js';
-import { UMB_SECTION_SIDEBAR_CONTEXT } from '../section-sidebar/index.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, nothing, customElement, state, ref } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
-import { UmbContextProxyController } from '@umbraco-cms/backoffice/context-proxy';
-
-@customElement('umb-section-sidebar-context-menu')
-export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
- #sectionSidebarContext?: UmbSectionSidebarContext;
-
- @state()
- private _isOpen = false;
-
- @state()
- private _entityType?: string;
-
- @state()
- private _unique?: string | null;
-
- @state()
- private _headline?: string;
-
- constructor() {
- super();
-
- this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT, (instance) => {
- this.#sectionSidebarContext = instance;
- this.#observeEntityModel();
-
- if (this.#sectionSidebarContext) {
- // make prettier not break the lines on the next 4 lines:
- // prettier-ignore
- this.observe( this.#sectionSidebarContext.contextMenuIsOpen, (value) => (this._isOpen = value), '_observeContextMenuIsOpen');
- // prettier-ignore
- this.observe(this.#sectionSidebarContext.headline, (value) => (this._headline = value), '_observeHeadline');
- } else {
- this.removeUmbControllerByAlias('_observeContextMenuIsOpen');
- this.removeUmbControllerByAlias('_observeHeadline');
- }
- });
- }
-
- #observeEntityModel() {
- if (!this.#sectionSidebarContext) {
- this.removeUmbControllerByAlias('_observeEntityModel');
- return;
- }
-
- this.observe(
- observeMultiple([this.#sectionSidebarContext.unique, this.#sectionSidebarContext.entityType]),
- (values) => {
- this._unique = values[0];
- this._entityType = values[1];
- },
- '_observeEntityModel',
- );
- }
-
- #closeContextMenu() {
- this.#sectionSidebarContext?.closeContextMenu();
- }
-
- #onActionExecuted(event: CustomEvent) {
- event.stopPropagation();
- this.#closeContextMenu();
- }
-
- #setupProxy(target: EventTarget | undefined) {
- new UmbContextProxyController(this, target, () =>
- this.#sectionSidebarContext?.getContextElement(),
- ).setIgnoreContextAliases([UMB_SECTION_SIDEBAR_CONTEXT.contextAlias]);
- }
-
- override render() {
- return html`
- ${this.#renderBackdrop()}
-
-
- ${this.#renderModal()}
-
- `;
- }
-
- #renderBackdrop() {
- // TODO: add keyboard support (close on escape)
-
- return this._isOpen ? html`` : nothing;
- }
-
- #renderModal() {
- return this._isOpen && this._unique !== undefined && this._entityType
- ? html`
- ${this._headline ? html`${this.localize.string(this._headline)}
` : nothing}
-
- `
- : nothing;
- }
-
- static override styles = [
- UmbTextStyles,
- css`
- :host {
- display: block;
- width: 100%;
- height: 100%;
- z-index: 1;
- }
- #backdrop {
- content: '';
- position: absolute;
- inset: 0px;
- background-color: black;
- opacity: 0.5;
- width: 100vw;
- height: 100vh;
- z-index: -1;
- }
- #relative-wrapper {
- background-color: var(--uui-color-surface);
- position: relative;
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- }
- #action-modal {
- position: absolute;
- height: 100%;
- z-index: 1;
- top: 0;
- right: calc(var(--umb-section-sidebar-width) * -1);
- width: var(--umb-section-sidebar-width);
- border: none;
- border-left: 1px solid var(--uui-color-border);
- border-right: 1px solid var(--uui-color-border);
- background-color: var(--uui-color-surface);
- }
-
- #action-modal h3 {
- padding: var(--uui-size-4) var(--uui-size-8);
- margin: 0;
- min-height: var(--umb-header-layout-height);
- box-sizing: border-box;
- display: flex;
- align-items: center;
- }
- #action-modal umb-entity-action-list {
- --uui-menu-item-flat-structure: 0;
- }
- `,
- ];
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- 'umb-section-sidebar-context-menu': UmbSectionSidebarContextMenuElement;
- }
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts
index dbb38f6093..263a48c727 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts
@@ -1,2 +1,2 @@
-export * from './section-sidebar.context.js';
export * from './section-sidebar.element.js';
+export * from './section-sidebar.context.token.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.token.ts
new file mode 100644
index 0000000000..c91ec2f0e5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.token.ts
@@ -0,0 +1,4 @@
+import type { UmbSectionSidebarContext } from './section-sidebar.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_SECTION_SIDEBAR_CONTEXT = new UmbContextToken('UmbSectionSidebarContext');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts
index 6c1bce2e19..7e67bb2e8b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts
@@ -1,53 +1,9 @@
-import type { UmbOpenContextMenuArgs } from './types.js';
-import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UMB_SECTION_SIDEBAR_CONTEXT } from './section-sidebar.context.token.js';
import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbStringState, UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
export class UmbSectionSidebarContext extends UmbContextBase {
- #contextMenuIsOpen = new UmbBooleanState(false);
- contextMenuIsOpen = this.#contextMenuIsOpen.asObservable();
-
- #entityType = new UmbStringState(undefined);
- entityType = this.#entityType.asObservable();
-
- #unique = new UmbStringState(undefined);
- unique = this.#unique.asObservable();
-
- #headline = new UmbStringState(undefined);
- headline = this.#headline.asObservable();
-
- #contextElement: Element | undefined = undefined;
-
constructor(host: UmbControllerHost) {
super(host, UMB_SECTION_SIDEBAR_CONTEXT);
}
-
- toggleContextMenu(host: Element, args: UmbOpenContextMenuArgs) {
- this.openContextMenu(host, args);
- }
-
- // TODO: we wont get notified about tree item name changes because we don't have a subscription
- // we need to figure out how we best can handle this when we only know the entity and unique id
- openContextMenu(host: Element, args: UmbOpenContextMenuArgs) {
- this.#entityType.setValue(args.entityType);
- this.#unique.setValue(args.unique);
- this.#headline.setValue(args.headline);
- this.#contextMenuIsOpen.setValue(true);
- this.#contextElement = host;
- }
-
- closeContextMenu() {
- this.#contextMenuIsOpen.setValue(false);
- this.#entityType.setValue(undefined);
- this.#unique.setValue(undefined);
- this.#headline.setValue(undefined);
- this.#contextElement = undefined;
- }
-
- getContextElement() {
- return this.#contextElement;
- }
}
-
-export const UMB_SECTION_SIDEBAR_CONTEXT = new UmbContextToken('UmbSectionSidebarContext');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts
index 4bb1a9b759..8a30e0e455 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts
@@ -12,7 +12,7 @@ import { UmbBooleanState, UmbObjectState, UmbStringState } from '@umbraco-cms/ba
import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
import { UmbDeprecation, debounce } from '@umbraco-cms/backoffice/utils';
import { UmbParentEntityContext } from '@umbraco-cms/backoffice/entity';
-import { UMB_SECTION_CONTEXT, UMB_SECTION_SIDEBAR_CONTEXT } from '@umbraco-cms/backoffice/section';
+import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { UmbEntityModel, UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
@@ -69,7 +69,6 @@ export abstract class UmbTreeItemContextBase<
public treeContext?: typeof UMB_TREE_CONTEXT.TYPE;
#sectionContext?: typeof UMB_SECTION_CONTEXT.TYPE;
- #sectionSidebarContext?: typeof UMB_SECTION_SIDEBAR_CONTEXT.TYPE;
#parentContext = new UmbParentEntityContext(this);
@@ -172,18 +171,6 @@ export abstract class UmbTreeItemContextBase<
*/
public loadNextItems = (): Promise => this.#treeItemChildrenManager.loadNextChildren();
- public toggleContextMenu() {
- if (!this.getTreeItem() || !this.entityType || this.unique === undefined) {
- throw new Error('Could not request children, tree item is not set');
- }
-
- this.#sectionSidebarContext?.toggleContextMenu(this.getHostElement(), {
- entityType: this.entityType,
- unique: this.unique,
- headline: this.getTreeItem()?.name || '',
- });
- }
-
/**
* Selects the tree item
* @memberof UmbTreeItemContextBase
@@ -241,10 +228,6 @@ export abstract class UmbTreeItemContextBase<
this.#observeSectionPath();
});
- this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT, (instance) => {
- this.#sectionSidebarContext = instance;
- });
-
this.consumeContext(UMB_TREE_CONTEXT, (treeContext) => {
this.treeContext = treeContext;
this.#observeIsSelectable();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts
index acd7a3fadf..885de32b35 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts
@@ -25,7 +25,6 @@ export interface UmbTreeItemContext