Navi with Tailwind and Alpine

[fabianwurk]

Sorry, I know this is not a Navi specific issue but I'm just wondering if you could advise on this?

I'm trying out Navi with Tailwind and Alpine. I have a basic version sorta working but unfortunately I'm struggling with a few issues:

1. When I click parent nav items that have no child items it still triggers the dropdown 😔

@if ($navigation)
  <ul class="inline-block relative" x-data="{open: false}">
    @foreach ($navigation as $item)
      <li class="inline-block {{ $item->classes ?? '' }} {{ $item->active ? '' : '' }}">
        <a href="{{ $item->url }}" @click="open = !open" class="focus:outline-none cursor-pointer inline-block text-white hover:text-indigo-600 flex px-4 py-3">
          {{ $item->label }}
        </a>

        @if ($item->children)
        <ul x-show="open" class="bg-white absolute mt-2 shadow rounded w-60 py-1 text-indigo-600"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 transform -translate-y-2"
          x-transition:enter-end="opacity-100 transform translate-y-0"
          x-transition:leave="transition ease-in duration-300"
          x-transition:leave-end="opacity-0 transform -translate-y-3"
            >
            @foreach ($item->children as $child)
              <li class="my-child-item px-5 py-3 {{ $item->classes ?? '' }} {{ $child->active ? '' : '' }}">
                <a href="{{ $child->url }}">
                  {{ $child->label }}
                </a>
              </li>
            @endforeach
          </ul>
        @endif

      </li>
    @endforeach
  </ul>
@endif

2. I'm also looking to add an SVG dropdown arrow on the parent item which has child nav items, but just don't know where it would go on Navi eg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :class="{'rotate-180': open}" class="ml-1 transform inline-block fill-current text-gray-500 w-6 h-6"><path fill-rule="evenodd" d="M15.3 10.3a1 1 0 011.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4l3.3 3.29 3.3-3.3z"/></svg>

Any help would be much appreciated as I've gone around in circles on this for the past few days.

Thanks

[Log1x]

@if ($navigation)
  <ul class="inline-block relative" x-data="{ open: false }">
    @foreach ($navigation as $item)
      <li class="inline-block {{ $item->classes ?? '' }} {{ $item->active ? '' : '' }}">
        <a href="{{ $item->url }}" {!! $item->children ? '@click="open = !open"' : '' !!} class="focus:outline-none cursor-pointer inline-block text-white hover:text-indigo-600 flex px-4 py-3">
          {{ $item->label }}

          @if ($item->children)
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :class="{'rotate-180': open}" class="ml-1 transform inline-block fill-current text-gray-500 w-6 h-6">
              <path fill-rule="evenodd" d="M15.3 10.3a1 1 0 011.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4l3.3 3.29 3.3-3.3z"/>
            </svg>
          @endif
        </a>

        @if ($item->children)
         <ul
            class="bg-white absolute mt-2 shadow rounded w-60 py-1 text-indigo-600"
            x-show="open"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform -translate-y-2"
            x-transition:enter-end="opacity-100 transform translate-y-0"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-end="opacity-0 transform -translate-y-3"
          >
            @foreach ($item->children as $child)
              <li class="my-child-item px-5 py-3 {{ $item->classes ?? '' }} {{ $child->active ? '' : '' }}">
                <a href="{{ $child->url }}">
                  {{ $child->label }}
                </a>
              </li>
            @endforeach
          </ul>
        @endif
      </li>
    @endforeach
  </ul>
@endif

[damacs]

That worked perfectly. Thank you so much for that 👍