<!-- 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>