Krys4lide/crates/app/templates/layout/nav/desktop/profile-dropdown.html

74 lines
2.5 KiB
HTML

<script type="text/javascript">
// This script is used to toggle the visibility of the profile dropdown
// when the user clicks on the profile button.
function toggleProfileDropdown() {
const profileDropdown = document.getElementById("profile-dropdown");
const isVisible = profileDropdown.getAttribute("data-visible") === "true";
profileDropdown.setAttribute("data-visible", !isVisible);
if (isVisible) {
// Leaving !
profileDropdown.classList.replace("scale-100", "scale-95");
profileDropdown.classList.replace("opacity-100", "opacity-0");
profileDropdown.classList.replace("ease-out", "ease-in");
profileDropdown.classList.replace("duration-200", "duration-75");
} else {
// Entering !
profileDropdown.classList.replace("scale-95", "scale-100");
profileDropdown.classList.replace("opacity-0", "opacity-100");
profileDropdown.classList.replace("ease-in", "ease-out");
profileDropdown.classList.replace("duration-75", "duration-200");
}
}
document.addEventListener("DOMContentLoaded", function () {
const profileButton = document.getElementById("user-menu-button");
const profileDropdown = document.getElementById("profile-dropdown");
// Toggle on profile button click
profileButton.addEventListener("click", function () {
toggleProfileDropdown();
});
// Toggle on click outside of the dropdown
document.addEventListener("click", function (event) {
const isProfileDropdownVisible = profileDropdown.getAttribute("data-visible") === "true";
if (isProfileDropdownVisible && !profileDropdown.contains(event.target) && !profileButton.contains(event.target)) {
toggleProfileDropdown();
}
});
});
</script>
<div
class="opacity-0 absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
id="profile-dropdown"
aria-orientation="vertical"
aria-labelledby="user-menu-button"
tabindex="-1"
>
<!-- Active: "bg-gray-100", Not Active: "" -->
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700"
role="menuitem"
tabindex="-1"
id="user-menu-item-0"
>Your Profile</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700"
role="menuitem"
tabindex="-1"
id="user-menu-item-1"
>Settings</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700"
role="menuitem"
tabindex="-1"
id="user-menu-item-2"
>Sign out</a
>
</div>