<div
  class="
    fixed
    lg:absolute
    top-0
    lg:top-14
    inset-x-0
    lg:left-0
    w-full
    lg:w-[320px]
    pt-2
    lg:-translate-x-1/4
    transition-all
    duration-300
  "
  x-bind:class="{
    'opacity-100 translate-y-0 z-50': openedMegamenu === 'megamenu-2',
    'opacity-0 translate-y-1 pointer-events-none z-0': openedMegamenu !== 'megamenu-2',
  }"
  x-cloak
>
  <div
    class="
      relative
      w-full
      min-h-[50vh]
      lg:min-h-fit
      px-3
      pb-3
      pt-12
      lg:p-3
      rounded-2xl
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      shadow-2xl shadow-muted-500/20
      dark:shadow-muted-800/20
    "
  >
    <!--Close button-->
    <button
      type="button"
      class="
        absolute
        top-2
        right-2
        h-12
        w-12
        flex
        lg:hidden
        items-center
        justify-center
        text-muted-600
        dark:text-muted-200
      "
      @click="megamenuOpened = false, openedMegamenu = ''"
    >
      <i class="iconify w-6 h-6" data-icon="lucide:x"></i>
    </button>

    <!--Grid-->
    <div class="grid gap-1 text-left">
      <!--Grid item-->
      <a
        href="/about.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-primary-100
            dark:bg-primary-500
            text-primary-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:buildings-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            About Us
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Learn more about us and our company
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/blog.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-primary-100
            dark:bg-primary-500
            text-primary-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:note-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Blog
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Stay tuned for our latest news
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/contact.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-primary-100
            dark:bg-primary-500
            text-primary-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:envelope-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Contact Us
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Want to reach out? It's here
          </p>
        </div>
      </a>
    </div>
  </div>
</div>
