sidebar with entity actions

src/Umbraco.Web.UI.Client/libs/extension-registry/models/index.ts

@@ -14,7 +14,11 @@ import type { ManifestPropertyAction } from './property-action.model';
 import type { ManifestPropertyEditorUI, ManifestPropertyEditorModel } from './property-editor.model';
 import type { ManifestRepository } from './repository.model';
 import type { ManifestSection } from './section.model';
-import type { ManifestSectionSidebarApp, ManifestSectionSidebarAppMenuKind } from './section-sidebar-app.model';
+import type {
+	ManifestSectionSidebarApp,
+	ManifestSectionSidebarAppMenuKind,
+	ManifestSectionSidebarAppMenuWithEntityActionsKind,
+} from './section-sidebar-app.model';
 import type { ManifestSectionView } from './section-view.model';
 import type { ManifestStore, ManifestTreeStore, ManifestItemStore } from './store.model';
 import type { ManifestTheme } from './theme.model';
@@ -79,6 +83,7 @@ export type ManifestTypes =
 	| ManifestSection
 	| ManifestSectionSidebarApp
 	| ManifestSectionSidebarAppMenuKind
+	| ManifestSectionSidebarAppMenuWithEntityActionsKind
 	| ManifestSectionView
 	| ManifestStore
 	| ManifestTheme

src/Umbraco.Web.UI.Client/libs/extension-registry/models/section-sidebar-app.model.ts

@@ -10,13 +10,27 @@ export interface ConditionsSectionSidebarApp {
 	sections: Array<string>;
 }
 
-export interface ManifestSectionSidebarAppMenuKind extends ManifestSectionSidebarApp {
+export interface ManifestSectionSidebarAppBaseMenu extends ManifestSectionSidebarApp {
+	type: 'sectionSidebarApp';
+	meta: MetaSectionSidebarAppMenuKind;
+}
+
+export interface ManifestSectionSidebarAppMenuKind extends ManifestSectionSidebarAppBaseMenu {
 	type: 'sectionSidebarApp';
 	kind: 'menu';
-	meta: MetaSectionSidebarAppMenuKind;
 }
 
 export interface MetaSectionSidebarAppMenuKind {
 	label: string;
 	menu: string;
 }
+
+export interface ManifestSectionSidebarAppMenuWithEntityActionsKind extends ManifestSectionSidebarAppBaseMenu {
+	type: 'sectionSidebarApp';
+	kind: 'menuWithEntityActions';
+	meta: MetaSectionSidebarAppMenuWithEntityActionsKind;
+}
+
+export interface MetaSectionSidebarAppMenuWithEntityActionsKind extends MetaSectionSidebarAppMenuKind {
+	entityType: string;
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts

@@ -0,0 +1,42 @@
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UmbSectionSidebarMenuElement } from '../section-sidebar-menu/section-sidebar-menu.element';
+import {
+	ManifestSectionSidebarAppMenuWithEntityActionsKind,
+	UmbBackofficeManifestKind,
+	umbExtensionsRegistry,
+} from '@umbraco-cms/backoffice/extension-registry';
+
+import '../../menu/menu.element';
+
+const manifestWithEntityActions: UmbBackofficeManifestKind = {
+	type: 'kind',
+	alias: 'Umb.Kind.Menu',
+	matchKind: 'menuWithEntityActions',
+	matchType: 'sectionSidebarApp',
+	manifest: {
+		type: 'sectionSidebarApp',
+		elementName: 'umb-section-sidebar-menu',
+	},
+};
+umbExtensionsRegistry.register(manifestWithEntityActions);
+
+@customElement('umb-section-sidebar-menu-with-entity-actions')
+export class UmbSectionSidebarMenuWithEntityActionsElement extends UmbSectionSidebarMenuElement<ManifestSectionSidebarAppMenuWithEntityActionsKind> {
+	renderHeader() {
+		return html`<h3>${this.manifest?.meta?.label}</h3>
+			<umb-entity-actions-bundle
+				slot="actions"
+				entity-type=${this.manifest?.meta.entityType}
+				.label=${this.manifest?.meta.label}>
+			</umb-entity-actions-bundle> `;
+	}
+}
+
+export default UmbSectionSidebarMenuWithEntityActionsElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-section-sidebar-menu-with-entity-actions': UmbSectionSidebarMenuElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.stories.ts

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+
+import type { UmbSectionSidebarMenuWithEntityActionsElement } from './section-sidebar-menu-with-entity-actions.element';
+import './section-sidebar-menu-with-entity-actions.element';
+
+export default {
+	title: 'Sections/Shared/Section Sidebar Menu With Entity Actions',
+	component: 'umb-section-sidebar-menu-with-entity-actions',
+	id: 'umb-section-sidebar-menu-with-entity-actions',
+} as Meta;
+
+export const AAAOverview: Story<UmbSectionSidebarMenuWithEntityActionsElement> = () =>
+	html` <umb-section-sidebar-menu-with-entity-actions></umb-section-sidebar-menu-with-entity-actions>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu/section-sidebar-menu.element.ts

@@ -3,6 +3,7 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import {
 	ManifestMenu,
+	ManifestSectionSidebarAppBaseMenu,
 	ManifestSectionSidebarAppMenuKind,
 	UmbBackofficeManifestKind,
 	umbExtensionsRegistry,
@@ -25,13 +26,19 @@ const manifest: UmbBackofficeManifestKind = {
 umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-section-sidebar-menu')
-export class UmbSectionSidebarMenuElement extends UmbLitElement {
+export class UmbSectionSidebarMenuElement<
+	ManifestType extends ManifestSectionSidebarAppBaseMenu = ManifestSectionSidebarAppMenuKind
+> extends UmbLitElement {
 	@property()
-	manifest?: ManifestSectionSidebarAppMenuKind;
+	manifest?: ManifestType;
+
+	renderHeader() {
+		return html`<h3>${this.manifest?.meta?.label}</h3>`;
+	}
 
 	render() {
 		// TODO: link to dashboards when clicking on the menu item header
-		return html` <h3>${this.manifest?.meta?.label}</h3>
+		return html`${this.renderHeader()}
 			<umb-extension-slot
 				type="menu"
 				.filter=${(menu: ManifestMenu) => menu.alias === this.manifest?.meta?.menu}

src/Umbraco.Web.UI.Client/src/packages/core/components/section/section.element.ts

@@ -14,6 +14,7 @@ import type { UmbRoute } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 import './section-sidebar-menu/section-sidebar-menu.element';
+import './section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element';
 
 /**
  * @export