diff options
Diffstat (limited to 'src/core/components')
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 72 | ||||
| -rw-r--r-- | src/core/components/layouts/AnimationLayout.jsx | 32 |
2 files changed, 41 insertions, 63 deletions
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> ) |