  <div
    x-show="isSideMenuOpen"
    x-transition:enter="transition ease-in-out duration-150"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in-out duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
  ></div>
  <aside
    class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-ante-800 md:hidden"
    x-show="isSideMenuOpen"
    x-transition:enter="transition ease-in-out duration-150"
    x-transition:enter-start="opacity-0 transform -translate-x-20"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in-out duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0 transform -translate-x-20"
    @click.away="closeSideMenu"
    @keydown.escape="closeSideMenu"
  >
    <div class="py-4 text-gray-500 dark:text-gray-400">
    <!--LOGO-->
    <div class="ml-6 xl:flex justify-start p-6 items-center space-x-3">
      <svg
      width="50px"
      height="34"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 49.5 34"
      style="enable-background: new 0 0 49.5 34"
      xml:space="preserve"
    >
      <g
        id="_x33_6550281-c152-4ce2-990d-167a22c594d3"
        transform="matrix(6.92041540145874,0,0,6.92041540145874,-3.5294103622436523,70.88926696777344)"
        class="hidden"
      >
        <path
          class="inline fill-white"
          d="M2-7.2L2-6.9C1.8-7.1,1.6-7.2,1.3-7.2c-0.5,0-0.8,0.4-.8,0.9c0,0.6,0.4,0.9,0.8,0.9c0.3,0,0.5-0.1,0.6-0.3 L2-5.4h0.3v-1.8H2z M1.4-5.7c-0.3,0-0.5-0.3-0.5-0.6c0-0.3,0.2-0.6,0.5-0.6C1.8-6.9,2-6.6,2-6.3C2-5.9,1.8-5.7,1.4-5.7z M3.7-7.2 c-0.2,0-0.4,0.1-0.5,0.3l0-0.2H2.8v1.8h0.4v-1.1c0-0.3,0.2-0.4,0.4-0.4C3.9-6.9,4-6.7,4-6.4v1h0.4v-1.1C4.4-7,4-7.2,3.7-7.2z M5.7-7.2H5.3v-0.5H4.9v0.5H4.7v0.3h0.2v1.5h0.4l0-1.5h0.4V-7.2z M7.7-6.3c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,1,0.9c0.3,0,0.6-0.1,0.7-0.3L7.3-5.8C7.2-5.7,7-5.6,6.8-5.6c-0.3,0-0.5-0.2-0.6-0.5h1.4V-6.3z M6.8-6.9 c0.3,0,0.5,0.2,0.5,0.4h-1C6.3-6.7,6.5-6.9,6.8-6.9z"
        />
      </g>
      <g
        id="_x37_c58d5ce-69d4-406d-a9a9-419a0015f485"
        transform="matrix(1.3293944597244263,0,0,1.3293944597244263,26.043088912963867,-21.303251266479492)"
      >
        <g>
          <path
            class="fill-white"
            d="M0,31c0.3-0.8,0.9-1.9,1.7-2.7h-8.9c-2.3,0-3.3,2.5-3.8,3.9c-0.1,0.2-0.1,0.3-0.2,0.5c-0.5,1.2-1.1,4.4-1.2,4.8c-0.1,0.7,0.3,1.4,1,1.6c0.1,0,0.2,0,0.3,0c0.6,0,1.2-0.4,1.3-1.1c0.2-1.3,0.8-3.5,1-4.2c0.1-0.2,0.1-0.3,0.2-0.6l0.1,5.1c0,0.7,0.6,1.2,1.3,1.2h3.4c0.7,0,1.2-0.5,1.3-1.2l0.1-7.3C-2.3,31,0,31,0,31z"
          />
          <circle class="fill-white" cx="-5.4" cy="24.4" r="3.1" />
          <path
            class="fill-white"
            d="M13.2,37.4c-0.1-0.3-0.7-3.5-1.2-4.8c-0.1-0.1-0.1-0.3-0.2-0.5c-0.5-1.3-1.4-3.9-3.8-3.9H4.4c-2.3,0-3.3,2.5-3.8,3.9c-0.1,0.2-0.1,0.3-0.2,0.5C0,33.9-0.6,37-0.7,37.4c-0.1,0.7,0.3,1.4,1,1.6s1.4-0.3,1.6-1c0.2-1.3,0.8-3.5,1-4.2c0.1-0.2,0.1-0.3,0.2-0.6l0.1,5.1c0,0.7,0.6,1.2,1.3,1.2h3.4c0.7,0,1.2-0.5,1.3-.2l0.1.1c0.1,0.2,0.1,0.4,0.2,0.6c0.3,0.7,0.8,3,1,4.2c0.1,0.6,0.7,1.1,1.3,1.1c0.1,0,0.2,0,0.3,0C12.8,38.8,13.3,38.1,13.2,37.4L13.2,37.4z"
          />
          <circle class="fill-white" cx="6.2" cy="24.4" r="3.1" />
        </g>
      </g>
    </svg>
    <p class="text-2xl leading-6 text-white">ante</p>
    </div>
      <ul class="mt-6">
        <li class="relative px-6 py-3">
          <span
            class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
            aria-hidden="true"
          ></span>
          <a
            class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
            href="index.html"
          >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
            />
          </svg>
            <span class="ml-4">Dashboard</span>
          </a>
        </li>
      </ul>

      <ul class="mb-12">
        <li class="ml-6 mb-2 font-semibold text-white">Groups</li>
        <li class="ml-6 text-violet-400">â€¢ Evans Family</li>
        <li class="ml-6 mb-6">Best Friends</li>
        <li class="ml-6 mb-2 font-semibold text-white">Members</span>
        <li class="ml-6">JHE</li>
        <li class="ml-6">james3760</li>
        <li class="ml-6 mb-6">AlexisE</li>
        <li class="ml-6 mb-2 font-semibold text-white">Open Requests</li>
        <li class="ml-6">Tasks: 0</li>
        <li class="ml-6">Payments: 1</li>
      </ul>

      <a href="/logout" 
      class=" ml-6 text-white bg-violet-600 border-0 py-2 px-6 focus:outline-none hover:bg-violet-500 rounded text-lg"    
    />Sign Out</a>
    </div>
  </aside>