{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="flex flex-1 items-end lg:items-center justify-center top-menu max-lg:flex-col max-md:items-end" {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 font-medium hover:text-gray-950" 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>
            <hr class=" last:hidden w-full lg:hidden"/>
        {/foreach}
      </ul>
    {/if}
{/function}

<button class="toggle-main-menu absolute right-4 top-1/2 block -translate-y-1/2 ring-primary focus:ring-2 lg:hidden">
  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M4 6l16 0"></path>
    <path d="M4 12l16 0"></path>
    <path d="M4 18l16 0"></path>
  </svg>
</button>
<nav class="mobile-main-menu absolute z-10 right-4 top-[70%] w-full max-w-[160px] border border-gray-100 justify-center rounded-lg bg-white p-4 md:p-2 drop-shadow-lg lg:static lg:border-none lg:flex lg:w-full lg:max-w-full lg:bg-transparent lg:py-0 lg:shadow-none hidden" id="_desktop_top_menu">
  {menu nodes=$menu.children}
</nav>