diff options
Diffstat (limited to 'src/core/components')
| -rw-r--r-- | src/core/components/elements/Popup/BottomPopup.jsx | 77 | ||||
| -rw-r--r-- | src/core/components/elements/Sidebar/Sidebar.jsx | 116 |
2 files changed, 102 insertions, 91 deletions
diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx index 933a8f11..c3c380c0 100644 --- a/src/core/components/elements/Popup/BottomPopup.jsx +++ b/src/core/components/elements/Popup/BottomPopup.jsx @@ -1,5 +1,6 @@ import { XMarkIcon } from "@heroicons/react/24/outline" import { AnimatePresence, motion } from "framer-motion" +import { useEffect } from "react" const transition = { ease: 'linear', duration: 0.2 } @@ -8,38 +9,48 @@ const BottomPopup = ({ active = false, title, close -}) => ( - <> - <AnimatePresence> - { active && ( - <> - <motion.div - className="overlay" - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - exit={{ opacity: 0 }} - transition={transition} - onClick={close} - /> - <motion.div - initial={{ bottom: '-100%' }} - animate={{ bottom: 0 }} - exit={{ bottom: '-100%' }} - transition={transition} - className="fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white" - > - <div className="flex justify-between py-4"> - <div className="font-semibold text-h-sm">{ title }</div> - <button type="button" onClick={close}> - <XMarkIcon className="w-5 stroke-2" /> - </button> - </div> - { children } - </motion.div> - </> - ) } - </AnimatePresence> - </> -) +}) => { + useEffect(() => { + if (active) { + document.querySelector('html, body').classList.add('overflow-hidden') + } else { + document.querySelector('html, body').classList.remove('overflow-hidden') + } + }, [active]) + + return ( + <> + <AnimatePresence> + { active && ( + <> + <motion.div + className="overlay" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + transition={transition} + onClick={close} + /> + <motion.div + initial={{ bottom: '-100%' }} + animate={{ bottom: 0 }} + exit={{ bottom: '-100%' }} + transition={transition} + className="fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white" + > + <div className="flex justify-between py-4"> + <div className="font-semibold text-h-sm">{ title }</div> + <button type="button" onClick={close}> + <XMarkIcon className="w-5 stroke-2" /> + </button> + </div> + { children } + </motion.div> + </> + ) } + </AnimatePresence> + </> + ) +} export default BottomPopup
\ No newline at end of file diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 122a10f3..e81d6130 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -22,65 +22,65 @@ const Sidebar = ({ return ( <> - <AnimatePresence> - { active && ( - <> - <motion.div - className="overlay z-50" - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - exit={{ opacity: 0 }} - transition={transition} - onClick={close} - /> - <motion.div - className="fixed z-[55] top-0 h-full w-[80%] bg-white" - initial={{ left: '-80%' }} - animate={{ left: 0 }} - exit={{ left: '-80%' }} - transition={transition} - > - <div className="divide-y divide-gray_r-6"> - <div className="p-4 flex gap-x-3"> - { !auth && ( - <> - <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link> - <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link> - </> - ) } - { auth && ( - <> - <div className="text-caption-2 text-gray_r-11"> - { greeting() }, - <span className="text-body-2 text-gray_r-12 block mt-1 font-medium"> - { auth?.name } - </span> - </div> - <Link - onClick={close} - href="/my/menu" - className="!text-gray_r-11 ml-auto my-auto" - > - <Cog6ToothIcon className="w-6" /> - </Link> - </> - ) } + <AnimatePresence> + { active && ( + <> + <motion.div + className="overlay z-50" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + transition={transition} + onClick={close} + /> + <motion.div + className="fixed z-[55] top-0 h-full w-[80%] bg-white" + initial={{ left: '-80%' }} + animate={{ left: 0 }} + exit={{ left: '-80%' }} + transition={transition} + > + <div className="divide-y divide-gray_r-6"> + <div className="p-4 flex gap-x-3"> + { !auth && ( + <> + <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link> + <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link> + </> + ) } + { auth && ( + <> + <div className="text-caption-2 text-gray_r-11"> + { greeting() }, + <span className="text-body-2 text-gray_r-12 block mt-1 font-medium"> + { auth?.name } + </span> + </div> + <Link + onClick={close} + href="/my/menu" + className="!text-gray_r-11 ml-auto my-auto" + > + <Cog6ToothIcon className="w-6" /> + </Link> + </> + ) } + </div> + <SidebarLink className={itemClassName} href="/"> + Semua Brand + </SidebarLink> + <SidebarLink className={itemClassName} href="/"> + Tentang Indoteknik + </SidebarLink> + <SidebarLink className={itemClassName} href="/"> + Pusat Bantuan + </SidebarLink> + <button className={`${itemClassName} w-full text-left`}>Kategori</button> </div> - <SidebarLink className={itemClassName} href="/"> - Semua Brand - </SidebarLink> - <SidebarLink className={itemClassName} href="/"> - Tentang Indoteknik - </SidebarLink> - <SidebarLink className={itemClassName} href="/"> - Pusat Bantuan - </SidebarLink> - <button className={`${itemClassName} w-full text-left`}>Kategori</button> - </div> - </motion.div> - </> - ) } - </AnimatePresence> + </motion.div> + </> + ) } + </AnimatePresence> </> ) } |