currentNodeId

src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-section.element.ts

@@ -24,6 +24,9 @@ export class UmbContentSection extends LitElement {
     {
       path: 'dashboard',
       component: () => import('../../../section/section-dashboards.element'),
+      setup: () => {
+        this._currentNodeId = undefined;
+      },
     },
     {
       path: 'node/:nodeId',
@@ -40,13 +43,12 @@ export class UmbContentSection extends LitElement {
   ];
 
   @state()
-  private _currentNodeId!: string;
+  private _currentNodeId?: string;
 
   render() {
     return html`
-      <!-- TODO: Figure out how we name layout components -->
       <umb-section-sidebar>
-        <umb-content-tree .id="${this._currentNodeId}"></umb-content-tree>
+        <umb-content-tree .currentNodeId="${this._currentNodeId}"></umb-content-tree>
       </umb-section-sidebar>
       <router-slot id="router-slot" .routes="${this._routes}"></router-slot>
     `;

src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-tree.element.ts

@@ -15,7 +15,7 @@ class UmbContentTree extends LitElement {
   ];
 
   @property()
-  public id!: string;
+  public currentNodeId?: string;
 
   // simplified tree data for testing
   @state()
@@ -34,8 +34,7 @@ class UmbContentTree extends LitElement {
         ${this._tree.map(
           (item) => html`
             <uui-menu-item
-              ?active="${parseInt(this.id) === item.id}"
-              data-id="${item.id}"
+              ?active="${parseInt(this.currentNodeId || '-1') === item.id}"
               label="${item.name}"
               href="/section/content/node/${item.id}">
               <uui-icon slot="icon" name="${item.icon}"></uui-icon>