Spaces:
Build error
Build error
File size: 3,448 Bytes
75fefa7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
"use client";
import { AnimatePresence, cubicBezier, motion } from "motion/react";
import { useEffect } from "react";
import { Connector } from "@/components/shared/layout/curvy-rect";
import { useHeaderContext } from "@/components/shared/header/HeaderContext";
import { lockBody } from "@/components/shared/lockBody";
import AnimatedHeight from "@/components/shared/layout/animated-height";
export default function HeaderDropdownWrapper() {
const {
dropdownContent,
resetDropdownTimeout,
clearDropdown,
dropdownKey,
headerHeight,
headerTop,
} = useHeaderContext();
useEffect(() => {
lockBody("header-dropdown", !!dropdownContent);
}, [dropdownContent]);
return (
<AnimatePresence>
{dropdownContent && (
<motion.div
animate={{ opacity: 1 }}
className="h-screen w-screen fixed left-0 z-[2000] bg-black-alpha-40"
exit={{
opacity: 0,
transition: {
duration: 0.3,
delay: 0.1,
ease: cubicBezier(0.4, 0, 0.2, 1),
},
}}
initial={{ opacity: 0 }}
style={{
top: headerTop.current + headerHeight.current + 1,
}}
transition={{ duration: 0.3, ease: cubicBezier(0.4, 0, 0.2, 1) }}
>
<div
className="overlay"
onClick={() => {
if (window.innerWidth < 996) {
clearDropdown(true);
}
}}
onMouseEnter={() => {
if (window.innerWidth > 996) {
clearDropdown(true);
}
}}
/>
<AnimatedHeight
animate={{
transition: { duration: 0.5, ease: cubicBezier(0.4, 0, 0.2, 1) },
}}
className="overflow-clip relative"
exit={{
height: 0,
transition: { duration: 0.3, ease: cubicBezier(0.4, 0, 0.2, 1) },
}}
initial={{ height: 0 }}
>
<AnimatePresence mode="popLayout">
<motion.div
className="bg-background-base hide-scrollbar relative overflow-x-clip overflow-y-auto"
key={dropdownKey}
style={{
maxHeight: `calc(100vh - ${headerTop.current + headerHeight.current + 1}px)`,
}}
onMouseEnter={resetDropdownTimeout}
onMouseLeave={() => {
if (window.innerWidth < 996) return;
clearDropdown();
}}
>
<div className="cmw-[1112px] absolute h-full pointer-events-none top-0 border-x border-border-faint">
<Connector className="absolute -left-[11.5px] -top-11" />
<Connector className="absolute -right-[11.5px] -top-11" />
</div>
<motion.div
animate={{ opacity: 1 }}
exit={{ opacity: 0, pointerEvents: "none" }}
initial={{ opacity: 0 }}
transition={{
duration: 0.3,
ease: cubicBezier(0.4, 0, 0.2, 1),
}}
>
{dropdownContent}
</motion.div>
</motion.div>
</AnimatePresence>
</AnimatedHeight>
</motion.div>
)}
</AnimatePresence>
);
}
|