feat: replace vanilla JS by AlpineJS

crates/app/assets/css/style.css

@@ -708,6 +708,16 @@ video {
   transform-origin: top right;
 }
 
+.-translate-y-full {
+  --tw-translate-y: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-100 {
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -987,6 +997,10 @@ video {
   transition-duration: 75ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }

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

@@ -1,49 +1,14 @@
-<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"
+  class="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"
+  x-show="profileOpen"
+  x-on:click.outside="profileOpen = false"
+  x-cloak
+  x-transition
 >
   <!-- Active: "bg-gray-100", Not Active: "" -->
   <a

crates/app/templates/layout/nav/desktop/profile.html

@@ -1,5 +1,8 @@
 <!-- Profile dropdown -->
-<div class="relative ml-3">
+<div
+  class="relative ml-3"
+  x-data="{ profileOpen: false }"
+>
   <div>
     <button
       type="button"
@@ -8,6 +11,7 @@
       aria-controls="profile-dropdown"
       aria-expanded="false"
       aria-haspopup="menu"
+      x-on:click="profileOpen = ! profileOpen"
     >
       <span class="absolute -inset-1.5"></span>
       <span class="sr-only">Open user menu</span>