terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animate dropdown menus

Browse Source
This commit is contained in:
TerryM
2026-05-28 22:01:17 +08:00
parent 4e44636d68
commit f1a0e9ab40
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/layouts/PublicLayout.tsx
View File

@@ -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"