{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="flex flex-1 items-center justify-center top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
            <li class="{$node.type}{if $node.current} current {/if} px-2 py-2" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {$node.label}
              </a>
            </li>
        {/foreach}
      </ul>
    {/if}
{/function}

<div class="menu js-top-menu static hidden absolute left-0 right-0 lg:flex lg:flex-1 lg:items-center" id="_desktop_top_menu">
  {menu nodes=$menu.children}
</div>