implement section

This commit is contained in:
Niels Lyngsø
2023-02-06 13:47:20 +01:00
parent c95e3854be
commit b762f0236a

View File

@@ -11,6 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/element';
import './section-sidebar-menu/section-sidebar-menu.element.ts';
import './section-views/section-views.element.ts';
import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
@customElement('umb-section')
export class UmbSectionElement extends UmbLitElement {
@@ -173,9 +174,6 @@ export class UmbSectionElement extends UmbLitElement {
return {
path: 'view/' + view.meta.pathname,
component: () => createExtensionElement(view),
setup: () => {
this._sectionContext?.setActiveView(view);
},
};
}) ?? [];
@@ -187,6 +185,13 @@ export class UmbSectionElement extends UmbLitElement {
}
}
private _onRouteChange = (event: UmbRouterSlotChangeEvent) => {
const currentPath = event.target.localActiveViewPath;
const view = this._views?.find((view) => 'view/' + view.meta.pathname === currentPath);
if (!view) return;
this._sectionContext?.setActiveView(view);
}
render() {
return html`
${this._menuItems && this._menuItems.length > 0
@@ -199,7 +204,7 @@ export class UmbSectionElement extends UmbLitElement {
<umb-section-main>
${this._views && this._views.length > 0 ? html`<umb-section-views></umb-section-views>` : nothing}
${this._routes && this._routes.length > 0
? html`<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>`
? html`<umb-router-slot id="router-slot" .routes="${this._routes}" @change=${this._onRouteChange}></umb-router-slot>`
: nothing}
<slot></slot>
</umb-section-main>