fix

1 files changed, 62 insertions, 41 deletions

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 412ed915..122a10f3 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -2,6 +2,7 @@ import Link from "../Link/Link"
 import greeting from "@/core/utils/greeting"
 import { Cog6ToothIcon } from "@heroicons/react/24/solid"
 import useAuth from "@/core/hooks/useAuth"
+import { AnimatePresence, motion } from "framer-motion"
 
 const Sidebar = ({
   active,
@@ -17,49 +18,69 @@ const Sidebar = ({
   )
 
   const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
-  
+  const transition = { ease: 'linear', duration: 0.1 }
+
   return (
     <>
-      { active && <div className="overlay z-50" onClick={close}></div> }
-      <div className={`fixed z-[55] top-0 h-full w-[80%] transition-all ease-linear duration-50 bg-white ${active ? 'left-0' : '-left-[80%]'}`}>
-        <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>
-      </div>
+    <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>
+          </motion.div>
+        </>
+      ) }
+    </AnimatePresence>
     </>
   )
 }