Neos CMS integration/presentation separated navigation components

Helper_MenuItemsUriEnhancer.fusion

prototype(My.Site:Helper.MenuItemsUriEnhancer) < prototype(Neos.Fusion:Map) {
    items = ${[]}
    itemRenderer = Neos.Fusion:Value {
        nodeUri = Neos.Neos:NodeUri {
            node = ${item.node}
        }

        subItems = My.Site:Helper.MenuItemsUriEnhancer {
            items = ${item.subItems}
        }

        value = ${Array.set(item, 'uri', this.nodeUri)}
        [email protected] = ${Array.set(value, 'subItems', this.subItems)}
        [email protected][email protected] = ${this.subItems}
    }

    @if.hasItems = ${this.items}
}

Integration_Navigation.fusion

prototype(My.Site:Component.Navigation) < prototype(Neos.Fusion:Component) {
    items = Neos.Neos:MenuItems {
        startingPoint = ${site}
        @process.addNavUris = My.Site:Helper.MenuItemsUriEnhancer {
            items = ${value}
        }
    }

    renderer = My.Site:Component.Navigation.Presentation {
        items = ${props.items}
    }

    @cache {
        mode = 'cached'
        entryIdentifier {
            document = ${documentNode}
        }
        entryTags {
            1 = ${Neos.Caching.nodeTypeTag('My.Site:Document.Abstract.Page', site)}
        }
    }
}

Presentation_Navigation.fusion

prototype(My.Site:Component.Navigation.Presentation) < prototype(Neos.Fusion:Component) {
    items = ${[]}

    renderer = afx`
        <div class="header__nav--open">
            {I18n.translate('My.Site:NodeTypes.Components.Navigation:menu')}

            <div class="header__burger">
                <span class="header__burger--line"></span>
                <span class="header__burger--line"></span>
                <span class="header__burger--line"></span>
            </div>
        </div>
        <div class="header__nav">
            <span class="header__nav--close">
                {I18n.translate('My.Site:NodeTypes.Components.Navigation:close')}
            </span>
            <ul class="list-unstyled level1">
                <Neos.Fusion:Loop items={props.items}>
                    <li class={['level1__item', item.state , item.subItems ? 'level1__item--collapse' : '']}>
                        <a class="level1__link" href={item.uri} title={item.label}>
                            {item.label}
                        </a>
                        <span @if.hasSubitems={item.subItems} class="level1__collapse icon-arrow_down"></span>
                        <My.Site:Component.Navigation.Level2.Presentation items={item.subItems} />
                    </li>
                </Neos.Fusion:Loop>
            </ul>
        </div>
    `

    @styleguide {
        title = 'Navigation'
        description = 'Navigation'
        props {
            items = Neos.Fusion:DataStructure {
                0 = Neos.Fusion:DataStructure {
                    label = 'Blog'
                    uri = '/blog'
                    menuLevel = 1
                    state = 'active'
                    subItems = Neos.Fusion:DataStructure {
                        0 = Neos.Fusion:DataStructure {
                            label = '2021'
                            uri = '/blog/2021'
                            menuLevel = 2
                            state = 'current'
                        }
                    }
                }
                1 = Neos.Fusion:DataStructure {
                    label = 'Impressum'
                    uri = '/impressum'
                    menuLevel = 1
                    state = 'normal'
                    subItems = Neos.Fusion:DataStructure {

                    }
                }
                2 = Neos.Fusion:DataStructure {
                    label = 'Datenschutz'
                    uri = '/datenschutz'
                    menuLevel = 1
                    state = 'normal'
                    subItems = Neos.Fusion:DataStructure {

                    }
                }
            }
        }
    }
}

Presentation_Navigation.Level2.fusion

prototype(My.Site:Component.Navigation.Level2.Presentation) < prototype(Neos.Fusion:Component) {
    items = ${[]}

    renderer = afx`
        <ul class="list-unstyled level2">
            <Neos.Fusion:Loop items={props.items}>
                <li class={['level2__item', item.state]}>
                    <a class="level2__link" href={item.uri} title={item.label}>
                        {item.label}
                    </a>
                </li>
            </Neos.Fusion:Loop>
        </ul>
    `

    @if.hasItems = ${this.items}
}