fix

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>
     </>
   )
 }