Add header reveal animations

This commit is contained in:
TerryM
2026-05-28 22:57:05 +08:00
parent b59fd82006
commit 5ae9647465
3 changed files with 20 additions and 6 deletions

View File

@@ -61,8 +61,8 @@ function navClassName(active: boolean) {
].join(" ");
}
const dropdownAnimationClass =
"animate__animated animate__fadeInDown ark-dropdown-enter";
const dropdownAnimationClass = "ark-header-popover-enter";
const headerMenuAnimationClass = "ark-header-menu-enter";
const publicMenuOpenChangeEvent = "ark:public-menu-open-change";
@@ -508,7 +508,7 @@ export function PublicLayout() {
{open ? (
<div
ref={menuRef}
className={`${dropdownAnimationClass} fixed inset-x-0 top-[64px] z-50 grid gap-2 border-y border-ark-line bg-ark-nav px-4 py-3 shadow-2xl shadow-black/50 min-[440px]:px-5 sm:px-6 md:top-[70px] md:px-9 min-[1200px]:hidden`}
className={`${headerMenuAnimationClass} fixed inset-x-0 top-[64px] z-50 grid gap-2 bg-[#08070c] px-4 py-3 shadow-2xl shadow-black/50 min-[440px]:px-5 sm:px-6 md:top-[70px] 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