From f1a0e9ab4025ea6aff3be0b9bbcc7b3673e12ed3 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Thu, 28 May 2026 22:01:17 +0800
Subject: [PATCH] feat: animate dropdown menus

---
 src/index.css                |  5 +++++
 src/layouts/PublicLayout.tsx | 11 ++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/index.css b/src/index.css
index 5fa7c2c..ffdfa63 100644
--- a/src/index.css
+++ b/src/index.css
@@ -30,6 +30,11 @@ header button {
   -webkit-tap-highlight-color: transparent;
 }
 
+.ark-dropdown-enter {
+  --animate-duration: 220ms;
+  transform-origin: top center;
+}
+
 /* Desktop header nav: thin scrollbar when links overflow (still 單列) */
 .header-nav-scroll {
   scrollbar-width: thin;
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 7ae9dc9..3ffc598 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -60,6 +60,9 @@ function navClassName(active: boolean) {
   ].join(" ");
 }
 
+const dropdownAnimationClass =
+  "animate__animated animate__fadeInDown ark-dropdown-enter";
+
 type LanguageDropdownProps = {
   lang: Lang;
   setLang: (lang: Lang) => void;
@@ -145,7 +148,7 @@ function LanguageDropdown({
 
       {open ? (
         <div
-          className="absolute left-0 right-0 top-[calc(100%+0.5rem)] z-50 overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl"
+          className={`${dropdownAnimationClass} absolute left-0 right-0 top-[calc(100%+0.5rem)] z-50 overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl`}
           role="listbox"
           aria-label={ariaLabel}
         >
@@ -232,7 +235,7 @@ function MobileLanguageButton({
 
       {open ? (
         <div
-          className="absolute right-0 top-[calc(100%+0.5rem)] z-50 w-44 overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl"
+          className={`${dropdownAnimationClass} absolute right-0 top-[calc(100%+0.5rem)] z-50 w-44 overflow-hidden rounded-2xl border border-white/10 bg-[#1c1c21]/95 p-1.5 shadow-2xl shadow-black/70 ring-1 ring-ark-line/80 backdrop-blur-xl`}
           role="listbox"
           aria-label={ariaLabel}
         >
@@ -462,7 +465,9 @@ export function PublicLayout() {
         </div>
 
         {open ? (
-          <div className="grid gap-2 border-t border-ark-line bg-ark-nav px-4 py-3 min-[440px]:px-5 sm:px-6 md:px-9 min-[1200px]:hidden">
+          <div
+            className={`${dropdownAnimationClass} grid gap-2 border-t border-ark-line bg-ark-nav px-4 py-3 min-[440px]:px-5 sm:px-6 md:px-9 min-[1200px]:hidden`}
+          >
             <div className="mb-1 hidden items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2 md:flex">
               <button
                 type="button"