@for (node of nodes(); track node.label) {
<div class="node-row" [style.padding-left]="indent()">
    @if (hasToggle(node)) {
    <span class="toggle-indicator" (click)="onToggle(node, $event)">{{ node.expanded ? '−' : '+' }}</span>
    } @else {
    <span class="toggle-placeholder"></span>
    }
    @if (node.routerLink) {
    <a class="node-label" [routerLink]="node.routerLink" routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }">{{ node.label }}</a>
    } @else if (hasToggle(node)) {
    <span class="node-label clickable" (click)="onToggle(node, $event)">{{ node.label }}</span>
    } @else {
    <span class="node-label">{{ node.label }}</span>
    }
</div>
@if (node.expanded && node.children) {
<app-sidebar-tree-node [nodes]="node.children" [depth]="depth() + 1" />
}
}