Menu.fusion

prototype(Breadlesscode:Components.Molecule.Menu) < prototype(Neos.Fusion:Component) {
  startNode = ${ false }
  nested = ${ true }
  maxDepth = ${ 2 }
  level = ${ 1 }
  filter = ${ '[instanceof Neos.Neos:Document][_hiddenInIndex=false][_hidden=false]' }
  classes = Neos.Fusion:RawArray {
    list = 'c-nav-sidebar__list'
    listItem = 'c-nav-sidebar__item'
    link = 'c-nav-sidebar__link'
  }

  renderer = afx`
    <ul class={props.classes.list} @if.maxDepthIsReached={props.level <= props.maxDepth}>
      <Neos.Fusion:Collection collection={ q(props.startNode).children(props.filter) } itemName="item" @children="itemRenderer">
        <Noerdisch.ErsteNachhilfe:Components.Molecule.MenuItem
          item={ item }
          level={ props.level }
          classes={ props.classes }
          maxDepth={ props.maxDepth } />
      </Neos.Fusion:Collection>
    </ul>
  `
}

prototype(Breadlesscode:Components.Molecule.MenuItem) < prototype(Neos.Fusion:Component) {
  item = ${ false }
  level = ${ 1 }
  maxDepth = ${ 2 }
  classes = ${ [] }
  content = ${ q(this.item).property('title') }

  renderer = afx`
    <li class={props.classes.listItem + ' menu-level-'+props.level}>
      <Breadlesscode:Components.Atom.Link node={ item }>
        { props.content }
      </Breadlesscode:Components.Atom.Link>
      <Breadlesscode:Components.Molecule.Menu
        startNode={ item }
        maxDepth={ props.maxDepth }
        level={ props.level + 1 } />
    </li>
  `
}