74 lines
2.5 KiB
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>
|