From 4e634a9d3556e94c7ce0729ef9f15b73495b2e28 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 15 Mar 2023 14:52:16 +0700
Subject: product detail desktop

---
 .../components/elements/Navbar/NavbarDesktop.jsx   | 72 ++++++----------------
 src/core/components/layouts/AnimationLayout.jsx    | 32 +++++++---
 2 files changed, 41 insertions(+), 63 deletions(-)

(limited to 'src/core')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 2f7a6e23..fa620eb2 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -21,29 +21,17 @@ const NavbarDesktop = () => {
     <DesktopView>
       <div className='py-3 bg-yellow_r-10/60'>
         <div className='container mx-auto flex justify-between'>
-          <Link
-            href='/'
-            className='!text-gray_r-12'
-          >
+          <Link href='/' className='!text-gray_r-12'>
             Tentang Indoteknik.com
           </Link>
           <div className='flex gap-x-6'>
-            <Link
-              href='/'
-              className='!text-gray_r-12'
-            >
+            <Link href='/' className='!text-gray_r-12'>
               Pembayaran Tempo
             </Link>
-            <Link
-              href='/'
-              className='!text-gray_r-12'
-            >
+            <Link href='/' className='!text-gray_r-12'>
               F.A.Q
             </Link>
-            <Link
-              href='/'
-              className='!text-gray_r-12'
-            >
+            <Link href='/' className='!text-gray_r-12'>
               Fitur Layanan
             </Link>
           </div>
@@ -53,50 +41,28 @@ const NavbarDesktop = () => {
       <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'>
         <div className='container mx-auto flex gap-x-6'>
           <Link href='/'>
-            <Image
-              src={IndoteknikLogo}
-              alt='Indoteknik Logo'
-              width={180}
-              height={60}
-            />
+            <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={180} height={60} />
           </Link>
           <Search />
           <div className='flex gap-x-4'>
-            <Link
-              href='/my/transactions'
-              className='flex items-center gap-x-2 !text-gray_r-12/80'
-            >
+            <Link href='/my/transactions' className='flex items-center gap-x-2 !text-gray_r-12/80'>
               <DocumentCheckIcon className='w-7' />
               Pending
               <br />
               Quotation
             </Link>
-            <Link
-              href='/shop/cart'
-              className='flex items-center gap-x-2 !text-gray_r-12/80'
-            >
+            <Link href='/shop/cart' className='flex items-center gap-x-2 !text-gray_r-12/80'>
               <ShoppingCartIcon className='w-7' />
               Keranjang
               <br />
               Belanja
             </Link>
-            <Link
-              href='/my/wishlist'
-              className='flex items-center gap-x-2 !text-gray_r-12/80'
-            >
+            <Link href='/my/wishlist' className='flex items-center gap-x-2 !text-gray_r-12/80'>
               <HeartIcon className='w-7' />
               Wishlist
             </Link>
-            <a
-              href='https://wa.me/628'
-              className='flex items-center gap-x-1 !text-gray_r-12/80'
-            >
-              <Image
-                src='/images/socials/Whatsapp-2.png'
-                alt='Whatsapp'
-                width={48}
-                height={48}
-              />
+            <a href='https://wa.me/628' className='flex items-center gap-x-1 !text-gray_r-12/80'>
+              <Image src='/images/socials/Whatsapp-2.png' alt='Whatsapp' width={48} height={48} />
               <div>
                 <div className='font-semibold'>Order Via WA</div>
                 0812 8080 622 (Chat)
@@ -108,19 +74,19 @@ const NavbarDesktop = () => {
 
       <div className='container mx-auto mt-6'>
         <div className='flex bg-gray_r-2'>
-          <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center relative'>
+          <button
+            type='button'
+            onClick={() => setIsOpenCategory((isOpen) => !isOpen)}
+            onBlur={() => setIsOpenCategory(false)}
+            className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center relative'
+          >
             <div>Kategori Produk</div>
-            <button
-              type='button'
-              className='ml-auto pl-3'
-              onClick={() => setIsOpenCategory((category) => !category)}
-            >
-              <ChevronDownIcon className={`w-6 ${isOpenCategory ? 'rotate-180' : ''}`} />
-            </button>
+            <ChevronDownIcon className={`ml-auto w-6 ${isOpenCategory ? 'rotate-180' : ''}`} />
+            
             <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}>
               <Category />
             </div>
-          </div>
+          </button>
           <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'>
             <Link
               href='/'
diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx
index c4dee606..7acf21dc 100644
--- a/src/core/components/layouts/AnimationLayout.jsx
+++ b/src/core/components/layouts/AnimationLayout.jsx
@@ -1,20 +1,32 @@
+import useDevice from '@/core/hooks/useDevice'
 import { motion } from 'framer-motion'
 
 const AnimationLayout = ({ children, ...props }) => {
-  const transition = {
-    ease: 'easeIn',
-    duration: 0.2
+  const { isMobile } = useDevice()
+
+  const initialConfig = {
+    opacity: 0,
+    x: 0,
+    y: 0
+  }
+
+  const animateConfig = {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    transition: { duration: 0.2, delay: 0.2, ease: 'easeInOut' }
+  }
+
+  const exitConfig = {
+    opacity: 0,
+    x: isMobile ? 30 : 0,
+    y: 0,
+    transition: { duration: 0.2, ease: 'easeInOut' }
   }
 
   return (
     children && (
-      <motion.main
-        initial={{ opacity: 0, x: 0, y: 0 }}
-        animate={{ opacity: 1, x: 0, y: 0 }}
-        exit={{ opacity: 0, x: 30, y: 0 }}
-        transition={transition}
-        {...props}
-      >
+      <motion.main initial={initialConfig} animate={animateConfig} exit={exitConfig} {...props}>
         {children}
       </motion.main>
     )
-- 
cgit v1.2.3