Top menu button touch transition

Tap highlight will be disabled in upcoming Tailwind release by default:
tailwindlabs/tailwindcss#12299

Author: Cryszon

apps/frontend-nuxt/components/BaseTopMenuButton.vue

@@ -1,9 +1,14 @@
 <template>
   <button
-    class="hoverClass relative h-12 w-12 duration-300 before:absolute before:inset-0 before:-z-10 before:scale-0 before:rounded-full before:bg-silver-500 before:opacity-0 before:transition-all before:ease-in themeSkyDark:before:bg-silver-500/25"
+    class="buttonClass relative h-12 w-12 before:absolute before:inset-0 before:-z-10 before:scale-0 before:rounded-full before:bg-silver-500 before:opacity-0 before:transition-all before:ease-in themeSkyDark:before:bg-silver-500/25"
     :class="{
       activeClass: active,
+      // Mobile touch transition class is only applied for buttons that are not
+      // toggled via `active`
+      [transitionClass]: active === null,
     }"
+    @click="onClickButton"
+    @transitionend="transitionClass = 'transitionOut'"
   >
     <slot></slot>
   </button>
@@ -12,17 +17,50 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
-    active?: boolean;
+    active?: boolean | null;
   }>(),
   {
-    active: false,
+    active: null,
   },
 );
+
+//#region Mobile touch transition
+const transitionClass = ref<"transitionIn" | "transitionOut">("transitionOut");
+function onClickButton(e: MouseEvent) {
+  const el = e.currentTarget;
+  if (el instanceof HTMLElement) {
+    // Trigger DOM reflow to reset animation before finished.
+    el.style.animation = "none";
+    el.offsetHeight;
+    el.style.animation = "";
+    transitionClass.value = "transitionIn";
+  }
+}
+//#endregion
 </script>
 
 <style lang="postcss" scoped>
-.activeClass,
-.hoverClass:hover {
+/** Applied when button is active */
+.activeClass {
   @apply before:scale-100 before:opacity-100 before:ease-out;
 }
+
+/** Use normal :hover behaviour on desktop */
+@media (hover: hover) and (pointer: fine) {
+  .buttonClass:hover {
+    @apply before:scale-100 before:opacity-100 before:ease-out;
+  }
+}
+
+/** Target devices that don't support hover */
+@media not (hover: hover) {
+  .buttonClass.transitionIn {
+    @apply before:scale-100 before:opacity-100 before:ease-in;
+  }
+
+  .buttonClass.transitionOut {
+    /** Add delay before transitioning out */
+    @apply before:scale-0 before:opacity-0 before:delay-75 before:ease-out;
+  }
+}
 </style>

apps/frontend-nuxt/components/SelectLanguageButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative">
     <HeadlessMenu>
-      <HeadlessMenuButton v-slot="{ open }: { open: boolean }">
+      <HeadlessMenuButton as="template" v-slot="{ open }: { open: boolean }">
         <BaseTopMenuButton class="h-12 w-12" :active="open">
           <Icon class="h-6 w-6" name="ion:language" />
         </BaseTopMenuButton>