Afx based menu for Neos CMS

AfxMenu.fusion

prototype(Example:Navigation) < prototype(Neos.Fusion:Component) {
    startingPoint = ${site}
    depth = 0
    maxDepth = 99

    items = ${q(this.startingPoint).children('[instanceof Neos.Neos:Document][_hiddenInIndex=false]').get()}

    renderer = afx`
        <ul>
            <Neos.Fusion:Collection collection={props.items} itemName="item" @children="itemRenderer">
                <Example:Navigation.Item node={item} depth={props.depth+1} maxDepth={props.maxDepth}/>
            </Neos.Fusion:Collection>
        </ul>
    `

    @if.hasItems = ${Array.length(this.items) > 0}
    @if.notAtMaxDepth = ${this.depth < this.maxDepth}
}

prototype(Example:Navigation.Item) < prototype(Neos.Fusion:Component) {
    node = null
    depth = 0
    maxDepth = 99

    @context.node = ${this.node}

    itemUri = Neos.Neos:NodeUri {
        node = ${node}
    }

    renderer = afx`
        <li>
            <a href={props.itemUri} title={props.node.label}>{props.node.label}</a>
            <Example:Navigation startingPoint={props.node} depth={props.depth} maxDepth={props.maxDepth}/>
        </li>
    `
}