Tree categories in offcanvas

If i have the data received by the server action in this format, then i would probably do it like:

<ul class="menu-level-1" is="dmx-repeat" id="repeat1" dmx-bind:repeat="serverconnect1.data.query.data.filter(`level==1`)">
    <li>
        <dmx-value id="getParentId" dmx-bind:value="id"></dmx-value>
        <a href="#">{{name}}</a>
        <ul class="menu-level-2" is="dmx-repeat" id="repeat2" dmx-bind:repeat="serverconnect1.data.query.data.filter(`parentId==getParentId.value`)">
            <li>
                <dmx-value id="getParentId" dmx-bind:value="id"></dmx-value>
                <a href="#">{{name}}</a>
                <ul class="menu-level-3" is="dmx-repeat" id="repeat3" dmx-bind:repeat="serverconnect1.data.query.data.filter(`parentId==getParentId.value`)">
                    <li>
                        <a href="#">{{name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I would prefer nesting the data on the server side and sending the nested data from there like explained here: Nested Repeat Regions