Navigation: Mobile Default

<div x-data="{
    open: false,
    level: 0,
  }" @click.outside="open = false" class="flex items-stretch justify-between relative w-full h-14">

      <!-- Menu Button Begin -->
      <button x-on:click="open = !open" class="flex items-center px-5 space-x-3 focus:outline-none text-talke-blue">
          <div class="relative flex items-center justify-center w-6">
              <span x-bind:class="open ? 'translate-y-0 rotate-45' : '-translate-y-2'" class="absolute w-full h-0.5 transition transform bg-current"></span>

              <span x-bind:class="open ? 'opacity-0 translate-x-3' : 'opacity-100'" class="absolute w-full h-0.5 transition transform bg-current"></span>

              <span x-bind:class="open ? 'translate-y-0 -rotate-45' : 'translate-y-2'" class="absolute w-full h-0.5 transition transform bg-current"></span>
          </div>
          <span class="pr-5 text-sm uppercase font-talke-semibold">Menü</span>
      </button>
      <!-- Menu Button End -->

      <!-- Logo Menu Begin -->
      <div class="mx-auto flex max-w-content-max items-center inset-center">
          <a href="" class="block w-36 shrink-0 py-2">
              <img src="/images/logos/talke-logo.svg" alt="" />
          </a>
      </div>
      <!-- Logo Menu End -->

      <!-- Language Menu Begin -->
      <div class="flex items-center text-sm uppercase font-talke-semibold text-talke-blue relative" x-data="{ languageDropdownOpen: false }">
          <span class="flex items-center h-12 px-5 text-talke-red" @click="languageDropdownOpen = !languageDropdownOpen" @click.outside="languageDropdownOpen = false">
              DE <svg class="ml-4 shrink-0 w-3 h-auto fill-current rotate-180 text-talke-blue" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
              </svg>

          </span>
          <div class="transition-opacity bg-white absolute top-full right-0 w-full" :class="{
        'opacity-0 pointer-events-none' : !languageDropdownOpen,
        'opacity-100' : languageDropdownOpen
    }">
              <a class="flex items-center h-12 px-5" href="#">EN</a>
              <a class="flex items-center h-12 px-5" href="#">ES</a>
          </div>
      </div>
      <!-- Language Menu End -->

      <!-- Dropdown Begin -->
      <nav class="absolute top-full z-50 w-full overflow-x-hidden text-sm uppercase transition-opacity max-h-navigationMobile font-talke-semibold" x-data="{
      activeLevel1: 0,
      activeLevel2: 0,
    }" :class="{
        'opacity-0 pointer-events-none' : !open,
        'opacity-100' : open
    }">
          <div class="absolute top-0 w-full px-5 bg-white cursor-pointer text-talke-red" @click="
      level = level - 1
    ">
              <span class="flex items-center h-16 transition-opacity duration-300 delay-300 whitespace-nowrap" :class="{
        'opacity-0' : level == 0,
        'opacity-100' : level > 0
      }">
                  <svg class="mr-2 shrink-0 h-2 w-auto fill-current -rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                      <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                  </svg>
                  Zurück
              </span>
          </div>
          <ul class="relative flex flex-col justify-between transition-all duration-300 font-talke-semibold" :class="{
      'left-0' : level == 0,
      '-left-full' : level == 1,
      '-left-full-2x' : level == 2,
    }">
              <li class="even:bg-zinc-100 odd:bg-white">
                  <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 0
            ">
                      Carus
                      <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                          <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                      </svg>
                  </span>
                  <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 0 != activeLevel1,
        }">
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                              Adflicto tardus
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      debeo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      deleo
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                              Una ulciscor
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      vir
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      acquiro
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      patria
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                              Truculenter benevolentia
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      soluta
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      creo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      corona
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      delego
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li class="even:bg-zinc-100 odd:bg-white">
                  <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 1
            ">
                      Sto
                      <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                          <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                      </svg>
                  </span>
                  <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 1 != activeLevel1,
        }">
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                              Stultus adficio
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      adiuvo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      adfectus
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      eius
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      tenus
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                              Curvo suggero
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      nobis
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      tonsor
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      absum
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      thymum
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                              Adfectus neque
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      aqua
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      eos
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      occaecati
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      administratio
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                              Tendo aeneus
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      calamitas
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li class="even:bg-zinc-100 odd:bg-white">
                  <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
              level = level + 1,
              activeLevel1 = 2
            ">
                      Deprimo
                      <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                          <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                      </svg>
                  </span>
                  <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 2 != activeLevel1,
        }">
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                              Tametsi adsidue
                          </span>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                              Amet vis
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      viridis
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      ad
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      vociferor
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      coniecto
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                              Dolorem cursus
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      terga
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      vulgo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      paens
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                              Bis curto
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      demo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      pectus
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      fuga
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      fuga
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 4
                    ">
                              Careo denuo
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 4 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      usus
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 5
                    ">
                              Campana contigo
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 5 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      defendo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      excepturi
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      crastinus
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li class="even:bg-zinc-100 odd:bg-white">
                  <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 3
            ">
                      Debilito
                      <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                          <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                      </svg>
                  </span>
                  <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 3 != activeLevel1,
        }">
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                              Creta ullus
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      derideo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      uberrime
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      ullus
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      coma
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                              Dolorum spargo
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      alius
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                              Canto fugiat
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      aestus
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      sint
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                              Vorago absque
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      sum
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      tantum
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      stips
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li class="even:bg-zinc-100 odd:bg-white">
                  <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 4
            ">
                      Cohibeo
                      <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                          <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                      </svg>
                  </span>
                  <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 4 != activeLevel1,
        }">
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                              Cinis vinculum
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      paulatim
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      anser
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      aptus
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                              Cito optio
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      summa
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      statua
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                              Thymbra certe
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      adulatio
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li class="even:bg-zinc-100 odd:bg-white">
                  <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 5
            ">
                      Debitis
                      <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                          <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                      </svg>
                  </span>
                  <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 5 != activeLevel1,
        }">
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                              Animus iure
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      ago
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      annus
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                              Vesper arbitro
                          </span>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                              Commodi aut
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      labore
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      civis
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                              Coerceo adeptio
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      cohaero
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      accendo
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      textilis
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      demonstro
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 4
                    ">
                              Teres inventore
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 4 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      curtus
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li class="even:bg-zinc-100 odd:bg-white">
                  <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 6
            ">
                      Tredecim
                      <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                          <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                      </svg>
                  </span>
                  <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 6 != activeLevel1,
        }">
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                              Absorbeo astrum
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      possimus
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      denique
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      stella
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      tum
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                              Virtus deduco
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      pecto
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      ullam
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                      suus
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      carus
                                  </a>
                              </li>
                          </ul>
                      </li>
                      <li class="even:bg-white odd:bg-zinc-100">
                          <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                              Defluo considero
                              <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                              </svg>
                          </span>
                          <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      acidus
                                  </a>
                              </li>
                              <li class="even:bg-white odd:bg-zinc-100">
                                  <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                      argentum
                                  </a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
          </ul>

          <div class="transition-opacity duration-300 bg-talke-blue lg:bg-transparent lg:opacity-100" :class="{
        'opacity-100': level == 0,
        'opacity-0 lg:opacity-100': level != 0
      }">
              <div class="flex w-full overflow-hidden lg:pointer-events-none lg:fixed lg:justify-end lg:top-36 lg:max-w-outer-body">
                  <div class="grid w-full grid-cols-4 lg:pointer-events-auto lg:flex lg:gap-5 lg:items-end lg:flex-col lg:w-auto">
                      <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                          <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                              <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                  <svg class="h-11 w-auto" height="55.307" viewBox="0 0 58.134 55.307" width="58.134" xmlns="http://www.w3.org/2000/svg">
                                      <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                          <path d="m114.723 82.111c11.748 11.748 23.495 12.964 27.44 13.012a1.884 1.884 0 0 0 1.808-1.3l2.665-8a1.893 1.893 0 0 0 -.949-2.292l-8.842-4.421a1.894 1.894 0 0 0 -2.186.355l-4.749 4.75s-4.376-1.39-10.141-7.156-7.156-10.141-7.156-10.141l4.75-4.749a1.894 1.894 0 0 0 .355-2.186l-4.418-8.836a1.893 1.893 0 0 0 -2.3-.947l-8 2.665a1.884 1.884 0 0 0 -1.3 1.808c.059 3.943 1.276 15.691 13.023 27.438z" transform="translate(-100.711 -40.816)" />
                                          <rect height="25.876" rx="2" width="34.501" x="22.616" y="1.001" />
                                          <path d="m224.206 6.488 14.313 14.312a3.594 3.594 0 0 0 5.082 0l14.313-14.312" transform="translate(-201.194 -5.04)" />
                                      </g>
                                  </svg>
                              </div>
                              <div class="leading-4">
                                  Denego
                              </div>
                          </a>
                      </div>
                      <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                          <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                              <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                  <svg class="h-11 w-auto" height="57.265" viewBox="0 0 57.555 57.265" width="57.555" xmlns="http://www.w3.org/2000/svg">
                                      <path d="m115.108 85.125c12.092 12.095 24.192 13.347 28.251 13.397a1.94 1.94 0 0 0 1.861-1.334l2.744-8.232a1.949 1.949 0 0 0 -.978-2.36l-9.1-4.552a1.95 1.95 0 0 0 -2.251.365l-4.89 4.89s-4.505-1.431-10.441-7.368-7.368-10.441-7.368-10.441l4.89-4.89a1.95 1.95 0 0 0 .365-2.251l-4.552-9.1a1.949 1.949 0 0 0 -2.36-.978l-8.232 2.744a1.94 1.94 0 0 0 -1.334 1.862c.048 4.059 1.3 16.154 13.395 28.248z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-100.711 -42.257)" />
                                      <path d="m242.836 4a16.206 16.206 0 0 0 -13.2 25.637l-3.027 6.811 6.811-3.027a16.218 16.218 0 1 0 9.416-29.421z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-202.504 -2.999)" />
                                      <g fill="#fff">
                                          <path d="m257.226 77.422a2.444 2.444 0 0 1 -.389 1.356 2.584 2.584 0 0 1 -1.138.942 4.262 4.262 0 0 1 -1.776.341 4 4 0 0 1 -2.032-.465 2.707 2.707 0 0 1 -.922-.894 2.029 2.029 0 0 1 -.355-1.087.737.737 0 0 1 .755-.743.64.64 0 0 1 .451.17 1.338 1.338 0 0 1 .315.505 3.376 3.376 0 0 0 .343.664 1.393 1.393 0 0 0 .519.44 1.92 1.92 0 0 0 .88.173 1.985 1.985 0 0 0 1.217-.349 1.05 1.05 0 0 0 .468-.871.921.921 0 0 0 -.253-.672 1.628 1.628 0 0 0 -.653-.394q-.4-.136-1.07-.289a7.856 7.856 0 0 1 -1.5-.491 2.427 2.427 0 0 1 -.959-.766 1.988 1.988 0 0 1 -.355-1.206 2.071 2.071 0 0 1 .375-1.22 2.361 2.361 0 0 1 1.084-.82 4.441 4.441 0 0 1 1.668-.287 4.127 4.127 0 0 1 1.325.19 2.8 2.8 0 0 1 .928.505 2.11 2.11 0 0 1 .539.661 1.525 1.525 0 0 1 .17.675.8.8 0 0 1 -.213.542.679.679 0 0 1 -.531.241.61.61 0 0 1 -.44-.145 1.953 1.953 0 0 1 -.326-.474 2.149 2.149 0 0 0 -.545-.735 1.6 1.6 0 0 0 -1.022-.264 1.768 1.768 0 0 0 -1.052.287.833.833 0 0 0 -.4.69.7.7 0 0 0 .136.431 1.147 1.147 0 0 0 .375.312 2.533 2.533 0 0 0 .482.2q.244.074.806.216a12.63 12.63 0 0 1 1.274.363 3.858 3.858 0 0 1 .97.482 1.982 1.982 0 0 1 .624.718 2.3 2.3 0 0 1 .224 1.064" transform="translate(-222.067 -57.977)" />
                                          <path d="m296.038 71.458a4.443 4.443 0 0 1 2.222.525 3.4 3.4 0 0 1 1.4 1.492 5.085 5.085 0 0 1 .477 2.273 5.556 5.556 0 0 1 -.261 1.753 3.793 3.793 0 0 1 -.783 1.368 3.421 3.421 0 0 1 -1.282.885 5.057 5.057 0 0 1 -3.49-.009 3.468 3.468 0 0 1 -1.288-.888 3.8 3.8 0 0 1 -.78-1.379 5.565 5.565 0 0 1 -.264-1.742 5.381 5.381 0 0 1 .275-1.759 3.775 3.775 0 0 1 .8-1.362 3.449 3.449 0 0 1 1.271-.86 4.579 4.579 0 0 1 1.7-.3m2.395 4.279a3.9 3.9 0 0 0 -.3-1.583 2.2 2.2 0 0 0 -.843-1.013 2.316 2.316 0 0 0 -1.257-.343 2.274 2.274 0 0 0 -.933.19 2.052 2.052 0 0 0 -.738.553 2.643 2.643 0 0 0 -.488.928 4.192 4.192 0 0 0 -.179 1.268 4.3 4.3 0 0 0 .179 1.282 2.629 2.629 0 0 0 .505.951 2.125 2.125 0 0 0 .749.565 2.366 2.366 0 0 0 2.117-.136 2.235 2.235 0 0 0 .862-1 3.862 3.862 0 0 0 .321-1.663" transform="translate(-255.789 -57.977)" />
                                          <path d="m348.876 77.422a2.444 2.444 0 0 1 -.389 1.356 2.583 2.583 0 0 1 -1.138.942 4.262 4.262 0 0 1 -1.776.341 4 4 0 0 1 -2.032-.465 2.707 2.707 0 0 1 -.922-.894 2.029 2.029 0 0 1 -.355-1.087.737.737 0 0 1 .755-.743.64.64 0 0 1 .451.17 1.338 1.338 0 0 1 .315.505 3.376 3.376 0 0 0 .343.664 1.393 1.393 0 0 0 .519.44 1.921 1.921 0 0 0 .88.173 1.985 1.985 0 0 0 1.217-.349 1.05 1.05 0 0 0 .468-.871.921.921 0 0 0 -.253-.672 1.628 1.628 0 0 0 -.653-.394q-.4-.136-1.07-.289a7.857 7.857 0 0 1 -1.5-.491 2.428 2.428 0 0 1 -.959-.766 1.988 1.988 0 0 1 -.355-1.206 2.071 2.071 0 0 1 .375-1.22 2.361 2.361 0 0 1 1.084-.82 4.441 4.441 0 0 1 1.668-.287 4.127 4.127 0 0 1 1.325.19 2.8 2.8 0 0 1 .928.505 2.11 2.11 0 0 1 .539.661 1.525 1.525 0 0 1 .17.675.8.8 0 0 1 -.213.542.679.679 0 0 1 -.531.241.61.61 0 0 1 -.44-.145 1.953 1.953 0 0 1 -.326-.474 2.149 2.149 0 0 0 -.545-.735 1.6 1.6 0 0 0 -1.022-.264 1.768 1.768 0 0 0 -1.052.287.833.833 0 0 0 -.4.69.7.7 0 0 0 .136.431 1.147 1.147 0 0 0 .375.312 2.532 2.532 0 0 0 .482.2q.244.074.806.216a12.631 12.631 0 0 1 1.274.363 3.858 3.858 0 0 1 .97.482 1.982 1.982 0 0 1 .624.718 2.3 2.3 0 0 1 .224 1.064" transform="translate(-296.761 -57.977)" />
                                      </g>
                                  </svg>
                              </div>
                              <div class="leading-4">
                                  Patrocinor saepe
                              </div>
                          </a>
                      </div>
                      <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                          <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                              <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                  <svg class="h-11 w-auto" height="51.882" viewBox="0 0 43.237 51.882" width="43.237" xmlns="http://www.w3.org/2000/svg">
                                      <path d="m220.586 30.025v16.266m5.426-7.309c8.768.868 15.192 3.817 15.192 7.309 0 4.186-9.224 7.591-20.619 7.591s-20.619-3.405-20.619-7.591c0-3.492 6.425-6.441 15.193-7.309m13.023-34.982v2.6a3.253 3.253 0 0 1 -1.449 2.7l-1.806 1.2 2.17 14.1 2.809.562a3.254 3.254 0 0 1 2.617 3.19v1.67h-23.874v-1.67a3.254 3.254 0 0 1 2.617-3.19l2.809-.562 2.17-14.1-1.806-1.2a3.254 3.254 0 0 1 -1.45-2.707v-2.593z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-198.967 -3)" />
                                  </svg>
                              </div>
                              <div class="leading-4">
                                  Creptio
                              </div>
                          </a>
                      </div>
                      <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                          <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                              <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                  <svg class="h-11 w-auto" height="51.527" viewBox="0 0 45.783 51.527" width="45.783" xmlns="http://www.w3.org/2000/svg">
                                      <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                          <path d="m203.608 74.508 21.533 11.843 21.533-11.843" transform="translate(-202.25 -61.664)" />
                                          <path d="m22.892 24.687v25.84" />
                                          <path d="m282.83 36.049-21.53 11.79v7.591" transform="translate(-250.248 -29.665)" />
                                          <path d="m246.675 21.227v-5.384l-21.534-11.843-21.533 11.843v25.84l21.533 11.843 21.533-11.843v-22.717" transform="translate(-202.25 -2.999)" />
                                      </g>
                                  </svg>
                              </div>
                              <div class="leading-4">
                                  Tego vomito
                              </div>
                          </a>
                      </div>
                  </div>
              </div>

          </div>
      </nav>
      <!-- Dropdown End -->

  </div>