yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve active state check for menu and tree item (#19281)

Browse Source 
Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
This commit is contained in:
Mads Rasmussen
2025-05-09 11:11:39 +02:00
committed by GitHub
parent 1fc8b4ff7f
commit f772c26e6e
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item-layout/menu-item-layout.element.ts
View File

@@ -1,5 +1,6 @@
import { html, customElement, property, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { ensureSlash } from '@umbraco-cms/backoffice/router';
import { debounce } from '@umbraco-cms/backoffice/utils';
/**
@@ -62,8 +63,12 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
return;
}
const location = window.location.pathname;
this._isActive = location.includes(this.href);
/* Check if the current location includes the href of this menu item
We ensure that the paths ends with a slash to avoid collisions with paths like /path-1 and /path-1-2 where /path is in both.
Instead we compare /path-1/ with /path-1-2/ which wont collide.*/
const location = ensureSlash(window.location.pathname);
const compareHref = ensureSlash(this.href);
this._isActive = location.includes(compareHref);
}
override render() {

10
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts
View File

@@ -20,6 +20,7 @@ import type { UmbEntityActionEvent } from '@umbraco-cms/backoffice/entity-action
import { UmbDeprecation, UmbPaginationManager, debounce } from '@umbraco-cms/backoffice/utils';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbParentEntityContext, type UmbEntityModel, type UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
import { ensureSlash } from '@umbraco-cms/backoffice/router';
export abstract class UmbTreeItemContextBase<
TreeItemType extends UmbTreeItemModel,
@@ -449,9 +450,12 @@ export abstract class UmbTreeItemContextBase<
return;
}
const path = this.#path.getValue();
const location = window.location.pathname;
const isActive = location.includes(path);
/* Check if the current location includes the path of this tree item.
We ensure that the paths ends with a slash to avoid collisions with paths like /path-1 and /path-1-2 where /path-1 is in both.
Instead we compare /path-1/ with /path-1-2/ which wont collide.*/
const location = ensureSlash(window.location.pathname);
const comparePath = ensureSlash(this.#path.getValue());
const isActive = location.includes(comparePath);
this.#isActive.setValue(isActive);
}