Dropdown

                  
<!-- default dropdown -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
    <span>Dropdown Start</span>
    <span :class="{ '-rotate-180': dropdown == true }" class="transform duration-300 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute max-sm:top-14 top-[3.1rem] z-30 transition duration-400 ease-in-out end-auto start-0 min-w-[180px] inline-flex jdsnfsdnjsdmn rounded-lg bg-primary-950 border border-primary-600 py-2">
    <li class="relative">
      <a href="../users/profile.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="../users/setting.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="../docs/supports.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="../auth/logout.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>

<!-- default dropdown -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
    <span>Dropdown End</span>
    <span :class="{ '-rotate-180': dropdown == true }" class="transform duration-300 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute max-sm:top-14 top-[3.1rem] z-30 transition duration-400 ease-in-out start-auto end-0 min-w-[180px] inline-flex jdsnfsdnjsdmn rounded-lg bg-primary-950 border border-primary-600 py-2">
    <li class="relative">
      <a href="../users/profile.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="../users/setting.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="../docs/supports.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="../auth/logout.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>
                  
                

                  
<!-- dropdown up -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
    <span>Dropdown Up</span>
    <span :class="{ 'rotate-0': dropdown == true }" class="transform duration-300 ms-auto -rotate-180 bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser3" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute max-sm:bottom-14 bottom-[3.1rem] z-30 transition duration-400 ease-in-out end-auto start-0 min-w-[180px] inline-flex jdsnfsdnjsdmn rounded-lg bg-primary-950 border border-primary-600 py-2">
    <li class="relative">
      <a href="../users/profile.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="../users/setting.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="../docs/supports.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="../auth/logout.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>

<!-- dropdown side -->
<div x-data="{ dropdown: false }" class="relative">
  <button @click="dropdown = ! dropdown" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
    <span>Dropdown Side</span>
    <span :class="{ 'rotate-90': dropdown == true }" class="transform duration-300 -rotate-90 ms-auto bi bi-chevron-down"></span>
  </button>

  <ul id="dropUser4" x-show="dropdown" x-transition.duration.500ms :class="! dropdown ? '' : 'show'" @click.outside="dropdown = false" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute max-sm:top-0 top-0 z-30 transition duration-400 ease-in-out start-full end-0 min-w-[180px] inline-flex jdsnfsdnjsdmn rounded-lg bg-primary-950 border border-primary-600 py-2">
    <li class="relative">
      <a href="../users/profile.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-person-fill"></i>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="../users/setting.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-gear-fill"></i>
        Settings
      </a>
    </li>
    <li class="relative">
      <a href="../docs/supports.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-question-square-fill"></i>
        Help
      </a>
    </li>
    <li class="relative">
      <a href="../auth/logout.html"
      class="flex lkagdteuqnvdg olwuyhsbcnmdj gap-3 py-2 yujamnshjekwn hover:text-primary-300 hover:bg-primary-900">
        <i class="bi bi-box-arrow-right"></i>
        Logout
      </a>
    </li>
  </ul>
</div>