ikea/resources/js/Layouts/MegaMenu.vue

<template>
  <nav class="bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-900">
    <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
      <a
        href="https://flowbite.com"
        class="flex items-center space-x-3 rtl:space-x-reverse"
      >
        <img
          src="https://flowbite.com/docs/images/logo.svg"
          class="h-8"
          alt="Flowbite Logo"
        />
        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
          >Flowbite</span
        >
      </a>
      <button
        data-collapse-toggle="mega-menu-full-cta"
        type="button"
        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
        aria-controls="mega-menu-full-cta"
        aria-expanded="false"
      >
        <span class="sr-only">Open main menu</span>
        <svg
          class="w-5 h-5"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 17 14"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M1 1h15M1 7h15M1 13h15"
          />
        </svg>
      </button>
      <div
        id="mega-menu-full-cta"
        class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
      >
        <ul
          class="flex flex-col mt-4 font-medium md:flex-row md:mt-0 md:space-x-8 rtl:space-x-reverse"
        >
          <li>
            <a
              href="#"
              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
              aria-current="page"
              >Home</a
            >
          </li>
          <li>
            <button
              id="mega-menu-full-cta-dropdown-button"
              data-collapse-toggle="mega-menu-full-cta-dropdown"
              data-dropdown-placement="bottom"
              class="flex items-center justify-between w-full py-2 px-3 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
            >
              Company
              <svg
                class="w-2.5 h-2.5 ms-3"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 10 6"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="m1 1 4 4 4-4"
                />
              </svg>
            </button>
          </li>
          <li>
            <a
              href="#"
              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
              >Marketplace</a
            >
          </li>
          <li>
            <a
              href="#"
              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
              >Resources</a
            >
          </li>
          <li>
            <a
              href="#"
              class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700"
              >Contact</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div
      id="mega-menu-full-cta-dropdown"
      class="mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600"
    >
      <div
        class="grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6"
      >
        <ul class="space-y-4 sm:mb-4 md:mb-0" aria-labelledby="mega-menu-full-cta-button">
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              Online Stores
            </a>
          </li>
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              Segmentation
            </a>
          </li>
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              Marketing CRM
            </a>
          </li>
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              Online Stores
            </a>
          </li>
        </ul>
        <ul class="hidden mb-4 space-y-4 md:mb-0 sm:block">
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              Our Blog
            </a>
          </li>
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              Terms & Conditions
            </a>
          </li>
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              License
            </a>
          </li>
          <li>
            <a
              href="#"
              class="hover:underline hover:text-blue-600 dark:hover:text-blue-500"
            >
              Resources
            </a>
          </li>
        </ul>
        <div class="mt-4 md:mt-0">
          <h2 class="mb-2 font-semibold text-gray-900 dark:text-white">Our brands</h2>
          <p class="mb-2 text-gray-500 dark:text-gray-400">
            At Flowbite, we have a portfolio of brands that cater to a variety of
            preferences.
          </p>
          <a
            href="#"
            class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-700"
          >
            Explore our brands
            <span class="sr-only">Explore our brands </span>
            <svg
              class="w-3 h-3 ms-2 rtl:rotate-180"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 14 10"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M1 5h12m0 0L9 1m4 4L9 9"
              />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </nav>
</template>