<iman> update pop up cart

1 files changed, 16 insertions, 3 deletions

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index a7dd621d..c8aa7cc3 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -26,6 +26,7 @@ const Cardheader = (cartCount) => {
     useProductCartContext()
 
   const [isHovered, setIsHovered] = useState(false)
+  const [isTop, setIsTop] = useState(true)
 
   const products = useMemo(() => {
     return productCart?.products || []
@@ -84,12 +85,24 @@ const Cardheader = (cartCount) => {
     setCountCart(cartCount.cartCount)
   }, [cartCount])
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY === 0)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   const handleCheckout = async () => {
     SetButtonTerapkan(true)
     let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`)
     router.push('/shop/checkout')
   }
 
+
   return (
     <div className='relative group'>
       <div>
@@ -121,10 +134,10 @@ const Cardheader = (cartCount) => {
           <>
             <motion.div
               initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
+              animate={{ opacity: 1, top: isTop ? 230 : 155 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.15 }}
-              className='fixed top-[230px] left-0 w-full h-full bg-black/50 z-10'
+              transition={{ duration: 0.15, top: { duration: 0.3 } }}
+              className={`fixed left-0 w-full h-full bg-black/50 z-10`}
             />
 
             <motion.div