Add 2nd level dropdown

[fabianwurk]

Hi Brandon,

I'm trying to add a second level dropdown using

@if ($primary)
<div x-data="{ open: false }">
  <nav :class="{'flex': open, 'hidden': !open}" class="hidden pb-4 md:pb-0 lg:flex lg:justify-end lg:flex-row">
  <ul class="flex text-white text-sm">
    @foreach ($primary as $item)
      @if ($item->children)

        <li @click.away="open = false"
        class="relative ml-4 mr-1 hover:text-tcol"
        x-data="{ open: true, timeout: null }"
        {{-- x-data="{ open: false, timeout: null }" --}}
        x-on:mouseenter="open = true; clearTimeout(timeout)"
        {{-- x-on:mouseleave="timeout = setTimeout(() => { open = false }, 100)" --}}
        >
          <button @click="open = !open" class="flex flex-row">
          <a class="tracking-widest focus:outline-none uppercase {{ $item->classes ?? '' }} {{ $item->active ? 'text-tcol border-b-2 border-tcol pb-2' : '' }}" href="{{ $item->url }}">
            {{ $item->label }}
          </a>
          <svg
            viewBox="0 0 24 12"
            :class="{'rotate-180': open, 'rotate-0': !open}"
            class="inline w-4 h-4 transition-transform duration-200 transform text-white"
            x-cloak
            >
            <path d="M12 9.67a.68.68 0 01-.48-.19l-6-6a.68.68 0 011-1L12 8l5.52-5.52a.68.68 0 011 1l-6 6a.68.68 0 01-.52.19z" fill="currentColor"/>
          </svg>
          </button>

          <div
            x-show="open"
            class="absolute left-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
            style="display: none;"
          >
            <ul class="px-2 py-2 bg-white rounded-md shadow-2xl">
              @foreach ($item->children as $child)
              <li>
                <a class="block focus:outline-none text-pcol hover:text-scol mx-4 my-4 relative {{ $item->classes ?? '' }} {{ $child->active ? 'text-scol' : '' }}" href="{{ $child->url }}">
                  {{ $child->label }}
                </a>

                  <ul class="absolute bg-scol shadow-lg rounded w-48 p-4" style="left: 180px; top: 0;">
                  @foreach ($item->children as $child)
                    <li>
                      <a class="text-white">
                        {{ $child->label }}
                      </a>
                    </li>
                  @endforeach
                  </ul>

              </li>
              @endforeach
            </ul>
          </div>

        </li>

      @else
      <li class="mx-4 hover:text-tcol">
        <a class="tracking-widest focus:outline-none uppercase {{ $item->classes ?? '' }} {{ $item->active ? 'text-tcol border-b-2 border-tcol pb-2' : '' }}" href="{{ $item->url }}">
          {{ $item->label }}
        </a>
      </li>
      @endif
    @endforeach
    </ul>
  </nav>
</div>

@endif

but its just repeating label from first level dropdown:

<ul class="absolute bg-scol shadow-lg rounded w-48 p-4" style="left: 180px; top: 0;">
@foreach ($item->children as $child)
  <li>
    <a class="text-white">
      {{ $child->label }}
    </a>
  </li>
@endforeach
</ul>

Any idea what I'm doing wrong here?

Thanks.

[Log1x]

maybe try@foreach ($item->children as $secondChild) (instead of another $child)

[fabianwurk]

Thanks, yeah, had tried similar hierarchy naming approach earlier but seems to be same result using your suggestion:

@foreach ($item->children as $secondChild)
  <li>
    <a class="text-white">
      {{ $secondChild->label }}
    </a>
  </li>
@endforeach

[Log1x]

oh i see the problem. you need to loop @foreach ($child->children as $secondChild)

[fabianwurk]

Brandon that was exactly it. Thank you so much 👍